4

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?

Community
  • 1
  • 1
Eddie Rivas
  • 335
  • 1
  • 3
  • 11

3 Answers3

6

You could include the images in IMG elements elsewhere on the page and have them in a hidden container (display:none or visibility:hidden in the CSS) so they are loaded when the page first loads, but not visible. This should serve to cache the hovered image client side so you don't get the delay when the browser requests the :hover image referenced in the CSS.

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

That's if the JavaScript solution isn't working 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 GIFs that might affect you, depending on the animation... Regardless of whether the animated (hover) image is preloaded or not, once it is loaded, browsers tend to play the image in the background regardless of whether it is currently displayed or not. So, moving off the image and back over it again results in the animation 'jumping' to its current position, rather than continuing from where the animation had got to when you moved off the image. More noticeable with long animations rather than short ones.

MrWhite
  • 43,179
  • 8
  • 60
  • 84
  • If JS isn't available - couldn't you just use CSS to text-indent them -5000px or set visibility to hidden or something along those lines? They would still be loaded into the DOM and so would still be preloaded when it came time for the user to mouse over the static images. – Zac Seth Dec 15 '11 at 19:00
  • @Zac: isn't this what I'm already saying in _my_ answer? However, you do need to add some additional element to the HTML (if not using JavaScript) in order to assign the _hovered_ image to. – MrWhite Dec 16 '11 at 11:46
  • Ah, yeah. I just re-read your answer and you're right it's exactly what you were saying. I guess I mis-read. My bad... – Zac Seth Dec 16 '11 at 11:56
  • Thanks a bunch. I'll try this approach, my fear is just creating the hover effect on mouseover from a preloaded image. However, it occurs to me that I can make do this by setting the img properties with diplay:none and the hover property to display:block and then animate the size. Would this work though? Can something with display none be hovered over? I'll try it in code when I get a chance. – Eddie Rivas Dec 21 '11 at 04:33
  • @Eddie: 'preloaded' just means the browser has already cached the image so does not need to make another request to the server to fetch it (which is where the delay comes from). Nothing to fear. :) In order to achieve your goal you do not need to manipulate the `IMG` elements themselves - they are purely for caching the hovered images. With the `IMG` elements in place on the page, there is nothing more to do. Your CSS will work as-is, but the hover delay should be reduced. – MrWhite Dec 21 '11 at 08:49
  • Man, I tried doing this and I can't get it to work. I'm just not entirely sure how, because I'm not even usign IMG tags to begin with, just custom divs with background images. I tried using IMG tags to overlay the animated gif as an IMG and leave the static as a background image and make it's default visibility hidden and it's hover visible and it didn't work. What a fail! – Eddie Rivas Dec 30 '11 at 04:32
  • @EddieRivas: The code you already have should work as-is. You simply need to include a hidden `img` element somewhere else on the page that references the same animated-image that is in your `:hover` pseudo-class. That is enough to cache the image and minimise the delay. I've update my answer with an additional problem that you _might_ be experiencing. – MrWhite Dec 30 '11 at 13:44
  • Yeeeaah, I see what you're talking about. Although the jumping animation might not really be that much of a problem. My problem is that like you said, I need to use these img tags, when originally I'm not, I'm using an li subclass that changes the background-image css property. The reason I'm not using the img tag is because I kept having problems with it not behaving the way I wanted. I like that you added an example, I'm gonna keep trying to see if I can finally figure it out. Thanks for all the patience and help :D – Eddie Rivas Dec 30 '11 at 17:38
  • @EddieRivas: I think you are probably just thinking about it too hard, as there is actually very little to do. :) The `img` tag itself, although required initially to cache the animated image, is not used at all in the mouse over effect. Your CSS :hover already does this job. Like you say, it is only the first hover that has the problem, because after the first hover the image is cached in the browser. The `img` tag on the page effectively does this first hover for you - it caches the animated image. – MrWhite Dec 30 '11 at 23:47
3

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.

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

musefan
  • 47,875
  • 21
  • 135
  • 185
1

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

Check this link for more details.

Michael Minton
  • 4,447
  • 2
  • 19
  • 31