请问如何实现一张静态物品图片，当鼠标指针放在上面时，无延时替换为同种物品gif格式的360度展示图？多谢赐教！

[kramon]

简单来讲，就是如何实现当鼠标停在一张格式为jpg或png的图片上时，瞬时将图片替换为gif格式的图片。或者，有没有可能不进行替换，使gif图片常态下处于静止状，停止在第一帧上，当鼠标移到图片上时，才进行动态显示呢？请高手们不吝赐教，多谢！

[qiayue]

两张图，一张常态
一张gif，在:hover时显示

[qiuai]

预加载,然后hover切换就可以

[lleon]

一张gif
上半部分为静态
下半部分为动画
:link {background-position: left top; ...}
:hover {background-position: left bottom; ...}

[Tiny]

可以查看一下，虾米音乐首页顶部LOGO旁边的android和ios的图标

[kramon]

@Tiny 多谢，就是这个意思，可惜源代码里看不到。

[itcook]

.mobile-gallery {
width: 140px;
height: 39px;
float: left;
margin-top: 10px;
text-indent: -9999px;
background-repeat: no-repeat;
background-image: url(http://img.xiami.com/static/img/common/b1.gif);
}
.mobile-gallery:hover {
background-image: url(http://img.xiami.com/static/img/common/b2.gif);
}

虾米的，善用firebug或者浏览器的调试功能~

[itcook]

另外补充下，虾米这种会出现鼠标移上去可能动态gif还未载入的情况(没有任何显示)，@lleon 的方法更好：
1. 减少一次请求
2. 一般不会发生鼠标hover时没有显示的情况

当然这种实现方式的需要视觉设计稍微多花点功夫(时间成本略略高点)，上半部分(以@lleon 的方式说明，当然也可以是下半、左半、右半等等与动态部分不重合的任意方位)每一帧都是完全相同的图形来实现伪静态效果，动态部分就是不想同的图形来实现动态效果。

然后就是通过backgroud-positon来进行一般、hover的图片定位了。

记得图片最好进行压缩减肥 :)

[itcook]

再次补充：原谅我没有认真审题……Orz

360度产品展示的图片都不会太小，这种情况下还是用两张图片比较好，为了保证良好的用户体验，预加载是必须的，另外mouseover时可以调用javascript事件判断动态图是否加载完成，如果没有加载完成，再调用loading事件，loading完成后再显示动态图。

[kramon]

@itcook 非常感谢你的耐心解答，非常受用！