如何在悬停时进行圆形映射图像更改?

时间:2013-10-13 11:50:25

标签: html css imagemap

我有一个圆形图像,我设法找到如何在上一个问题中映射。我现在想知道当我将鼠标悬停在它上面时如何改变这个图像。它有一个映射区域。我有一个问题。

没有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;
} 

1 个答案:

答案 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>