Moving background image on hover

[T4gal]

I found a website that has a really cool effect for their links. The link is an image, and when you hover over it, it plays an animation, and after looking into it more, it seems that they use a single image with all of the different frames for the animation lined up, and they use this image as a background image and position it at one end. When you hover over it, they have the background image move from the position where the first frame is visible, to a position when the last frame is visible. Now, that only part I don't understand, is how they got it to actually go through the whole image to allow you to see all of the frames, rather than just jumping to the last frame.

I'm sorry if that makes very little sense, I can provide a link to the site if needed. I've looked all over and cannot find anything about this. I did find a lot about moving an image on hover, to show a different image, but nothing about slowing the process down.

Any help would be great.
Thanks!

[almostbob]

the image with a bunch of included icons is a sprite and it works just as you describe
its a page minimisation strategy, only 1 image is downloaded, instead of a larger number of images each with the delay negotiating the transfer, for small images 100 bytes of image and 220 bytes of http is not efficient

the google search would be "how to enable css sprites animation",
the slowdown is a series of small movements, better described in the search links than i can do

[migcosta]

hello t4gal,
check this..
http://addyosmani.com/blog/jquery-sprite-animation/

You also could do it with html5:
http://9elements.com/io/projects/html5/canvas/
or
http://anthonycalzadilla.com/css3-ATAT/index.html

It really all depends on what you want to do.. :)

[Biiim]

You might be able to do it with a simple webkit transition, not sure if it will look right

#div{
background-image: url(myimage.jpg);
background-position:0px 0px;
-webkit-transition: background-position 5s linear;
-moz-transition: background-position 5s linear;
-o-transition: background-position 5s linear;
-ms-transition: background-position 5s linear;
transition: background-position 5s linear;
}
#div:hover{
background-position: 2000px 0px;
}

otherwise you will need to use javascript to make 'frames' to display along the way eg.

function slideImage(eid,direction,frames,frameWidth,timePerFrame,curFrame){
	//direction true || false (true is forward)
	var ele = document.getElementById(eid);
	var totalWidth = frameWidth*frames;
	var totalTime = frames*timePerFrame;
	if(curFrame >= 1){
	}else{
		curFrame = 1;
	}
	
	if(direction){
		ele.style.backgroundPosition = ((frameWidth*curFrame)-frameWidth)+'px 0px';
	}else{
		ele.style.backgroundPosition = (totalWidth - ((frameWidth*curFrame)-frameWidth))+'px 0px';
	}
	if(curFrame <= frames){
		curFrame++;
		setTimeout("slideImage('"+eid+"',"+direction+","+frames+","+frameWidth+","+timePerFrame+","+curFrame+")",timePerFrame);
	}
}

i tested it working ok with ->

<div id='testDiv' style='background-color:#337733;width:100px;height:80px;' onmouseover="slideImage('testDiv',true,10,100,1000);" onmouseout="slideImage('testDiv',false,10,100,1000);">hi</div>

the 5th var timeperframe should be lowered much more to give much smoother animation, 50(0.05 seconds) would be 20 fps but of course requires a much bigger picture