Question

在我的个人网站上，我尝试使用onmouseover / onmouseout创建一些基本动画。第一个URL代表一个小的（50 x 50）灰度图像，第二个URL是相同的图像，但颜色。

<a><img src="link" onmouseover="this.src='url1'" onmouseout="this.src='url2'"></a>

代码功能正常，但它有一些问题。我已经注意到，单击图像链接后桌面和移动设备上的图像都会消失。浏览器不会加载任何新图像是有道理的，但我想知道是否有更好的替代方案。

Answer 1

正如@minitech所提到的，你应该使用CSS ...... HTML会是这样的：

<a><div class="my_image"></div></a>

CSS：

div.my_image {
    width: 50px;
    height: 50px;
    background-image: url('http://www.moo.com/blah.jpg');
}

div.my_image:hover {
    background-image: url('http://www.moo.com/otherblah.jpg');
}

Answer 2

最好使用CSS和jQuery的组合来做这种事情。您可以将图像保存为站点根目录或/ img子目录中的单独文件，然后根据要更改图像的事件将类添加到链接。

这里有一些快速代码来说明：

HTML：

<div id="backgroundImg"><a class="img-link" href=""></a></div>

CSS：

#backgroundImg a {
    width: 50px;
    height: 50px;
    background: url('img/grey-50x50.png') no-repeat;
    display: block;
}

#backgroundImg a.color {
    background: url('img/color-50x50.png') no-repeat;
}

和jQuery：

$('.image-link').mouseover().addClass('color').mouseout().removeClass('color');

因此，您将图像容器定义为div，通过CSS将图像作为背景图像加载到链接本身，然后在用户将鼠标悬停在.image-link元素上时更改类名。

您可以更进一步，将两个图像合并为一个50x100图像精灵，以提高性能。然后CSS会像：

#backgroundImg a {
    width: 50px;
    height: 50px;
    background: url('img/grey-color-50x100.png') no-repeat;
    background-position: 0 0;
    display: block;
}

#backgroundImg a.color {
    background-position: 0 -50px;
}

希望有所帮助。

onmouseover和onmouseout图像未加载

2 个答案: