开始GIF鼠标悬停和暂停否则？ [英] Start GIF On Mouse Hover and Pause Otherwise?

问题描述

所以我想让这些图像在我正在建设的页面的边栏是静态的，但当你鼠标悬停他们的动画为gifs。我目前的设置是让 background-image css属性图像通常是静态jpg，但在鼠标悬停时更改为动画gif。这是代码，以更好地说明我的观点。

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）; 
} 
  

我会让你从其余的，没有必要说我的观点。

HTML：

 < ul id =segments> ; 
< li>< a href =http://collabprojekt.com/tagged/fnb！ class =fnb>< / a>< / li> 
< li>< a href =http://collabprojekt.com/tagged/whhuclass =whhu>< / a>< / li> 
< / ul> 
  

网站是 http://tcptest.tumblr.com ，请查看左侧栏中的图片，了解其工作原理。

，但我唯一的问题是，第一次悬停，它必须加载的GIF，这会造成一个短暂的时刻，其中的盒子空白，而它加载的GIF。虽然这不是一个巨大的交易，它看起来真的不专业。

我试过这个想法（链接），但它失败了我。 b
$ b

所以我想我的问题是：有一个更好的方法来使用CSS或甚至任何其他语言，这样我就不会得到这个随机的空白时刻？

解决方案

您想学习的是如何预加载图片。 Google搜索HTML预加载图片会帮助你...

这个链接似乎有一个好主意使用javascript。

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

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.

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

这篇关于开始GIF鼠标悬停和暂停否则？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！