onmouseover和onmouseout图像未加载

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

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

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

来源

2013-10-15 Scottie

图片代表什么？使用CSS来处理这种事通常是一个好主意。 – Ryan

他们是社交网络标志图标和相应的链接。理想情况下，如果单击时显示任一图像，我更喜欢它。你认为在CSS中使用悬停可以解决问题吗？ – Scottie

是的，使用'：hover' /'：active'应该可以解决你的问题。 – Ryan

由于@minitech提，你应该使用CSS ... HTML会是这样的：

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

而CSS：

来源

2013-10-15 04:18:55

谢谢！我会试一试，看看是否能解决这个问题。 – Scottie

这是最好的使用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');

所以你定义图像容器a是一个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-15 04:35:16 ironmermaid

onmouseover和onmouseout图像未加载

回答

相关问题