0

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

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

该代码是有效的，但它有一些问题。我注意到在单击图像链接后，在桌面和移动设备上，图像都会消失。浏览器不会加载任何新图像是有道理的，但我想知道是否有更好的选择。

4

2 回答 2

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');
}
于 2013-10-15T04:18:55.417 回答
0

最好结合使用 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;
}

希望有帮助。

于 2013-10-15T04:35:16.543 回答