호버에서 맵핑 된 이미지를 변경하는 방법은 무엇입니까?

Question

이전 질문에서 매핑하는 방법을 찾을 수있는 둥근 이미지가 있습니다. 나는 이제 내가 어떻게 그 위에 마우스를 가져갈 때이 이미지를 변화시킬 수 있는지 궁금해. 매핑 된 영역이 있습니다. 나는 그것에 관한 문제가있다. 나는이 지역 (= 100 × 100 지역 MINUS 원 영역의 내부입니다 때

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

그것은 단지 작동 : 내가 "의 usemap ="#의 imagechange "는"문제의 원인이 있다고 생각 CSS없이

HTML 버전). 나는 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; 
} 

Answer 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>