title: How to make round mapped image change on hover?
body: <p>I have a round image which I managed to find how to map in a previous question. I now wonder how I can make this image change when i hover over it. It has a mapped area. I have a problem on that.</p>
  
  <p>HTML version without CSS where i believe that the " usemap="#imagechange" " is causing the problem:</p>
  
  <pre><code> &lt;img src="1.png" 
       onmouseover="this.src='2.png'" 
       onmouseout="this.src='1.png'" 
       width="100" height="100" 
       alt="usemap" border="0" 
       usemap="#imagechange"/&gt;
   &lt;map name="imagechange"&gt;
       &lt;area shape="circle" coords="50,50,50" href="image.com"  /&gt;
   &lt;/map&gt;
  </code></pre>
  
  <p>It works only when I am inside the area (= 100x100 area MINUS the circle area). 
  I also have a version with css which doesnt work at all. </p>
  
  <p>HTML version with CSS:</p>
  
  <pre><code>div class="imagechange" &gt; 
  &lt;img src='foundation/images/Twitter.png' 
            title="Map Image" 
            alt="usemap" border="0"
            usemap="#imagechange"/&gt; 
  &lt;map name="imagechange"&gt;
      &lt;area shape="circle" coords="50,50,50" href="index.html"  /&gt;
  &lt;/map&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>      .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;
  } 
  </code></pre>