So I'm trying to have these images on the sidebar of a page I'm building that are static but when you mouseover they animate as gifs. My current setup is to have the background-image css property image be a static jpg normally but change to an animated gif on mouseover. Here's 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'll spare you from the rest, it's unnecessary to make my point.
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>
The site is http://tcptest.tumblr.com, check out the left side bar with the images to see how it works currently.
This works, but my only problem is that for the first hover ever, it has to load the gif and this cause a short moment where the box goes blank while it loads the gif. While this isn't a huge deal, it looks really unprofessional.
I tried this idea (link) of using JS, but it failed me.
So I guess 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 blank moment?
What you want to learn is how to pre-load images. A Google search for "HTML preload images" will get you going...
This link seems to have a good idea using javascript.