Jump to content

Animated Image


Caitlin-havener
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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

Link to comment
Share on other sites

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

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

×
×
  • Create New...