Animated Image

[Caitlin-havener]

I have four images that I want to make one animated image when the person rolls over the object. Issue one- how would I script the animated image?

[Synook]

You could use JS to rapidly change the image's source - making sure you've preloaded the images first - but it may be easier to just turn the four into one animated GIF.

[ApocalypeX]

You could use CSS which is faster and easier to change.Heres an example of how you would make 1 roll over image:First open your image editor, open the first file copy and past it to a new image thats width is equal to your first image but its height is double. Then paste, move the image down to the bottom. Now open your over image copy and paste it to the new image and move it exactly above the lower image.Save the file your going to be using it.Now on your html page where you ant this image put this:

<a  class="rolloverimage"></a>

Then in your CSS style tag or file put this:

a.rolloverimage{	background-repeat:no-repeat;height:100px;width:250px;	 background-image: url(IMAGE URL);	 background-position: 0 0px;	 display:block;}a.rolloverimage:hover{	background-repeat:no-repeat;height:100px;width:250px;	 background-image: url(IMAGE URL);	 background-position: 0 -100px;	 display:block;	  }

Now you will want to change the the width to the width of you image and the height on each class should be half of the file.the 2nd class' background-position should = minus half the height.If you want to see a working example of this look at the download buttons on my site. Visit My Website

[Synook]

Note that method is known as CSS sprites. I believe she wanted an animation to occur, however.

[ApocalypeX]

Oh, in that case.Yeah just make a gif.