html - 图像映射图像替换 onMouseOver

Question

我想要一张整页图像，其中包含图像的一部分，当将鼠标悬停在该图像上时，会将图像更改为原始黑白图像的彩色版本。我尝试使用图像映射和 onMouseOver 执行此操作，但没有取得任何成功。只使用了两张图片，一张是彩色的，一张是黑白的。

我只想拥有它，这样当您将鼠标悬停在黑白图像的一部分上时，整个图像就会变成彩色版本，而 onMouseOut 会恢复为黑白图像。我将其用作博客的初始屏幕，悬停部分将用作指向该站点的链接。

感谢帮助

Answer 1

如果您不介意您的悬停区域是“正方形”，那么使用纯 css 这应该可行(请注意，将背景颜色替换为您合适的图像和 a 上的 border 只是为了说明)。在 Firefox、IE7、IE8 中测试:

HTML:

<a href="#"><span class="img"></span></a>

CSS (针对 IE7-8 错误进行编辑):

body {
 margin: 300px 218px 178px 400px; /*see explanation below css*/
 width: 22px; /*total width of a tag including padding and borders*/
 height: 22px; /*total height of a tag including padding and borders*/
}

a { /*warning, do not give this position: use margin to position it*/
 width: 20px; 
 height: 20px; 
 display: block; 
 border: 1px solid red; 
 overflow: visible; 
 /*deleted margin from this: moved to body*/
}
a span.img {
 position: absolute; /*this gives it block display by default*/
 top: 0; 
 left: 0; 
 z-index: -1; 
 background-color: yellow; /*bw image here*/
 width: 640px; /*image width*/
 height: 500px; /*image height*/
}
a:hover span.img {
 background-color: blue; /*color image here*/
}
/*deleted  the a:hover span.img:hover as it was not needed after all*/

当然，如果 IE6 是一个问题，那么您需要用 javascript 做一些事情，让它识别 span:hover。

编辑时添加:我发现 a 标记有时会悬停在 IE 浏览器的定义区域之外。为避免这种情况，正文必须放置边距，以便 left 和 top 定位 a 标记，而 right 和 bottom 必须弥补图像大小减去 a 标签的总宽度的差值。