我有一个圆形图像,我设法找到如何在上一个问题中映射。我现在想知道当我将鼠标悬停在它上面时如何改变这个图像。它有一个映射区域。我有一个问题。
没有CSS的HTML版本,我认为“usemap =”#imagechange“”导致问题:
<img src="1.png"
onmouseover="this.src='2.png'"
onmouseout="this.src='1.png'"
width="100" height="100"
alt="usemap" border="0"
usemap="#imagechange"/>
<map name="imagechange">
<area shape="circle" coords="50,50,50" href="image.com" />
</map>
仅当我在区域内时(= 100x100区域减去圆形区域)才有效。 我也有一个css版本,根本不起作用。
带CSS的HTML版本:
div class="imagechange" >
<img src='foundation/images/Twitter.png'
title="Map Image"
alt="usemap" border="0"
usemap="#imagechange"/>
<map name="imagechange">
<area shape="circle" coords="50,50,50" href="index.html" />
</map>
CSS
.imagechange {
width: 100px;
height:100px;
display:block;
overflow:hidden;
border-radius:50px;
-webkit-border-radius:50px;
}
.imagechange:hover {
border-radius:0px;
-webkit-border-radius:0px;
}
答案 0 :(得分:1)
使用此:
<a href='http://www.google.com/'>
<img src='1.png' onmouseover="this.src='2.png'" onmouseout="this.src='1.png'" style='border:0px; border-radius:999px; -webkit-border-radius:999px;'/>
</a>