CSS/JavaScript-ish question

[javaguy]

I have a web page with a DIV behind all the other DIVs. Its purpose is pure, gratuitous eye-candy. What it has is a column of GIF files, and I want to set the DIV's clip to a rect that shows only one at a time. The reason I don't just change the the .src of the images to show only the one I want is that I actually want the clip rect to slide from one image to the next by setting a timer function that will move the clip rect a little bit every so many milliseconds until it reaches its destination. So here's my condundrum: How do I figure out the exact coordinates of each IMG so I know where to move the clip rect?

[tyme]

are all the images in one image file? if they are, you can just shift the background image in CSS, i.e.:

background: transparent url('/img/tab.gif') 100% -200px no-repeat;

now, if you're trying to determine what pixel to point it to, just open the image in gimp, and put your pointer where you want it and it will tell you what pixel your at on the bottom right of the window. it will give you a positive value, but you'll want to make it - for the CSS (indicating "move down"). the percent i use is the horizontal value, it makes it move all the way to the right of the image. 0% keeps it at the left. i believe you can use a pixel value here too.

[javaguy]

They're not all in one file, but they could be.

 

But they are is the "on" version of some buttons on a layer in front of them. They "off" version on the front layer is the same image only with parts of it transparent. Rather than just do an image-switch to change from the "off" to the "on" version when the user clicks it, I thought it would be a cool bit of eye-candy to have all the "on" images in a div behind it and slide the clip rect. But yeah, the front div could be an image map of buttons instead of individual images, and the back could be all in one image file.

 

I'll let you know how it works out.

 

Thanks!

[javaguy]

Well I think I have the idea, but I can't get the clip rect to change dynamically:

 

	bgDiv = document.getElementById( 'navbar_bg' );
bgDiv.style.clip = "rec ( 300, 800, 380, 0 )";

 

It does recognize the clip rect I define for navbar_bg when I declare the div. It just doesn't change it dynamicallys. I don't see any errors in the javascript console.

[neddie]

bgDiv = document.getElementById( 'navbar_bg' );

bgDiv.style.clip = "rec ( 300, 800, 380, 0 )";

Try rect and no commas. And maybe 'px' to explicitly set the units.

[javaguy]

:)

 

That helps, but now it seems to work in IE and not in Mozilla. (It was purely by accident I found out it works in IE, I swear!)

[theYinYeti]

This "clip" thing does not look like a standard to me.

 

I assume all images are the same size, so that they can fit the div rectangle. Below is what I would do (and actually did); in my example, the rectangle is 105px large and 53px high and I have 3 images:

 

1/ Put all the images inside one single PNG, laid out vertically, eg: slide.png, the size of which is W*(n*H)=105px*159px.

2/ With CSS, put this style:

#slider-div {
 background: transparent url(slide.png) top left;
 width: 105px; /* images width */
 height: 159px; /* all images height */
}

3/ Create a standard JS object that starts the infinite processing and recomputes the background position each time:

var slider = {
 eltId: 'slider-div', // the ID of your DIV
 pxStep: 5,		   // number of pixels to move at each step
 timeStep: 50,		// milliseconds to wait between two consecutive steps
 delay: 2000,		 // milliseconds to wait between two transitions
 imageHeight: 53,	 // height of the images = height of the DIV
 numberOfImages: 3,   // number of images inside the background image file
 direction: -1,
 target: 0,
 elt: null,
 init: function() {
if (! document.getElementById) return;
var div = document.getElementById(slider.eltId);
if (div) {
  div.style.backgroundPosition = "0 0";
  div.style.height = slider.imageHeight + "px";
  slider.elt = div;
  slider.slide();
}
 },
 slide: function() {
if (! slider.elt) return;
var yOffset = parseInt(slider.elt.style.backgroundPosition.replace(/0[^\d]* (-?[0-9]+)[^\d]*/, "$1"));
var yTarget = -1 * slider.target * slider.imageHeight;
yOffset += slider.direction * slider.pxStep;
if ((yOffset - yTarget) * slider.direction >= 0) {
  yOffset = yTarget;
  slider.target = slider.target - slider.direction;
  if (slider.target >= slider.numberOfImages || slider.target < 0) {
	slider.target = slider.target + 2 * slider.direction;
	slider.direction = -1 * slider.direction;
  }
}
slider.elt.style.backgroundPosition = "0 " + yOffset + "px";
window.setTimeout("slider.slide()", (yTarget == yOffset ? slider.delay : slider.timeStep));
 }
}

eventManager.add(window, 'load', slider.init);

For the eventManager, look at my home site and use what you think is best (either my code or someone else's).

4/ Finally include the JS in the page; here is for example my test page:

<?xml version="1.0" encoding="ISO-8859-1" ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"><head>
<title>slider test</title>
<style type="text/css"><!--
#slider-div {
 border: thin solid black;
 position: relative;
 background: transparent url(slide.png) top left;
 width: 105px;
 height: 159px;
}
--></style>
<script type="text/javascript" src="events.js"></script>
<script type="text/javascript" src="slider.js"></script>
</head><body>
<div id="slider-div"/>
</body></html>

 

Yves.

 

[edit:]Slight changes:

- the initial value for "target" and "direction" must not be changed,

- the initial height of the DIV must be set to the total height of all images so that users without Javascript can still see all images,

- as a consequence, the "init" function of the slider object must set the DIV's height to the correct value (single image height).[/edit]

Edited May 11, 2006 by theYinYeti

[javaguy]

The clip region is from CSS2, but I haven't seen it used much.

http://www.w3.org/TR/REC-CSS2/visufx.html

 

YinYeti's solution looks great, though. I'll give it a whirl tonight.

 

Thanks!

[theYinYeti]

Thanks for the info. We always learn :)

Strange it isn't used anywhere I've seen... Maybe it isn't well supported.

 

Yves.