html - 图片映射图片替换onMouseOver

Question

我正在寻找一个完整的页面图像，其中包含图像的一部分，当将其悬停时，将图像更改为原始黑白图像的彩色版本。我尝试使用图像映射和 onMouseOver 来执行此操作，但没有任何成功。只使用了两张图片，一张是彩色的，一张是黑白的。

我只是想拥有它，这样当您将鼠标悬停在黑白图像的一部分上时，整个事情都会变成彩色版本，而 onMouseOut 会恢复为黑白。我将其用作博客的启动画面，悬停的部分将用作网站的链接。

谢谢您的帮助

Answer 1

如果您不介意悬停区域是“方形”，那么使用纯 CSS 应该可以工作（注意，用您的适当图像替换背景颜色，并且border仅a用于说明）。在 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减去标签的总宽度。