title: Change image on hover with image map using css
body: <p>I have an image map and I want to make it such that when one hovers over a certain part, a different image loads. I've searched, but been unable to find anything, so if you could link me to an answer that'd be great as well. If not, I'd prefer a pure css solution. If that isn't possible, please go into detail as far as implementing javascript/jquery as I have no experience with either. </p>
  
  <p>Here's my HTML:</p>
  
  <pre><code>    &lt;img src="image.jpg" alt="" usemap="map"&gt;
      &lt;map name="quadlinemap"&gt;
          &lt;area shape="circle" coords="105,92,77" href="image1.jpg"&gt;
          &lt;area shape="circle" coords="795,88,77" href="image2.jpg"&gt;
          &lt;area shape="circle" coords="106,309,77" href="image3.jpg"&gt;
          &lt;area shape="circle" coords="801,322,76" href="images4.jpg"&gt;
      &lt;/map&gt;
  </code></pre>
  
  <p>I'm not really sure about what should happen with the href, and I have no idea what CSS to use. Thanks in advance</p>