Launch GIF on mouseover and pause otherwise?

Question

So, I am trying to get these images on the sidebar of the page I am creating, which are static, but when you hover over the mouse, they animate like gifs. My current setup is for the background-image css property background-image be static jpg, but change to an animated gif on hover. Here is the code to illustrate my point better.

CSS

 #segments li a.fnb { background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/fnb%21-small.jpg); /*fallback*/ } #segments li a.whhu { background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/still.jpg); } #segments li a.fnb:hover { background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549933.gif); } #segments li a.whhu:hover { background-image: url(http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549841.gif); } 

I will relieve you of the rest, I do not have to express my point of view.

HTML:

 <ul id="segments"> <li><a href="http://collabprojekt.com/tagged/fnb!" class="fnb"></a></li> <li><a href="http://collabprojekt.com/tagged/whhu" class="whhu"></a></li> </ul> 

Website http://tcptest.tumblr.com , check the left panel with images to see how it currently works.

This works, but my only problem is that for the first freeze ever, it must load the gif, and this causes a short moment when the field becomes empty when it loads the gif. Although this is not a huge deal, it looks really unprofessional.

I tried this idea ( link ) of using JS, but I failed.

So, I think, my question is: is there a better way to do this with CSS or even any other language so that I don't get this random empty moment?

Answer 1

What you want to know is image preloading. A google search for “HTML preview images” will get you going ...

This link seems to have a good idea using javascript.

http://www.htmlgoodies.com/tutorials/web_graphics/article.php/3480001/So-You-Want-To-Pre-Load-Huh.htm

Answer 2

You can include images in IMG elements elsewhere on the page and place them in a hidden container ( display:none or visibility:hidden in CSS) so that they load when the page is loaded first but not displayed. This should serve to cache the client side of the hover image so that you do not get a delay when the browser requests an image: hover specified in CSS.

I would be inclined to use the same file path in the IMG SRC attribute that you use in CSS to make sure that the browser sees it as the same image.

What if a JavaScript solution does not work for you.

From your example above ...

 <!-- Cache Images --> <div style="display:none"> <img src="http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549933.gif" alt=""> <img src="http://dl.dropbox.com/u/8808984/2.0/SegmentThumbs/549841.gif" alt=""> </div> 

EDIT:

There is an additional problem with animated GIF files, which may affect you, depending on the animation ... Regardless of whether the animated (hover) image is preloaded or not, after downloading it, browsers usually play the image regardless whether it is currently displayed or not. Thus, moving the image back and forth through it again leads to the fact that the animation “jumps” to the current position, and does not continue from the place where the animation appeared when you moved away from the image. More noticeable with long animations, not short ones.

Answer 3

You can add a DIV to your hidden page ( display: none ) via CSS and put IMG tags for animated gifs. This will force the images to preload the page.

Read more about this link .