图像地图图像替换onMouseOver

我期待有一个完整的页面图像，图像的一部分，当盘旋时，将图像更改为原始黑色&白色图像的彩色版本。我试图用图像地图& onMouseOver做这件事，但没有取得任何成功。只有两个图像被使用，一个颜色和一个黑色和白色的。图像地图图像替换onMouseOver

我只想拥有它，这样当你将鼠标悬停在黑白图像的一部分上时，整个事物就变成了彩色版本，并且onMouseOut恢复为黑色和白色。我将此作为博客的启动画面，并且悬停部分将作为该网站的链接。

感谢您的帮助

来源

2010-07-23 flash

只是想让你知道我发现了一些需要调整CSS以调整效果才能正常工作的IE错误（我注意到IE会激活超出'a'标记大小的链接）。看到我编辑的CSS的变化。 – ScottS 2010-07-26 13:47:21

如果你不介意你的悬停区域是“方”，然后使用纯CSS这应该工作（注意，你适当的图像更换背景颜色和对a的border是只是为了说明）。经测试在Firefox，IE7，IE8：

HTML：

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

CSS （编辑以IE7-8 BUGS）：

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浏览器定义区域之外。为了避免这种情况，身体必须边缘放置在使得lefttop和位置a标记和right和bottom必须弥补在图像大小减去a标签的总宽度的差。

来源

2010-07-23 21:38:27 ScottS

图像地图图像替换onMouseOver

回答

相关问题