Change image on hover with image map using css

Question

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.

Here's my HTML:

    <img src="image.jpg" alt="" usemap="map">
    <map name="quadlinemap">
        <area shape="circle" coords="105,92,77" href="image1.jpg">
        <area shape="circle" coords="795,88,77" href="image2.jpg">
        <area shape="circle" coords="106,309,77" href="image3.jpg">
        <area shape="circle" coords="801,322,76" href="images4.jpg">
    </map>

I'm not really sure about what should happen with the href, and I have no idea what CSS to use. Thanks in advance

Answer 1

As I understood you have set of images and you want to display different image when one hovers over an image. You can do it with pure CSS. You can probably find a more simple solution using javascript, but here's my attempt. In this case your Html will be like

<img src="image.jpg" alt="" usemap="map">
<map name="quadlinemap">
    <area class="one" shape="circle" coords="105,92,77">
    <area class="two" shape="circle" coords="795,88,77">
    <area class="three" shape="circle" coords="106,309,77">
    <area class="four" shape="circle" coords="801,322,76">
</map>

And CSS

.one {
width: 100px;
height: 100px;
background: url('image1.jpg');
}

.one:hover {
background: url('image1_when_hover.jpg');
}

Similar for image two, three and four

PS: I did not try this code. You may have play around with z-index values.