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

Have you checked out this post? stackoverflow.com/questions/8343531/… — EnigmaRM
– EnigmaRM, Commented Jul 29, 2014 at 22:23

Anton Kastritskiy · Accepted Answer · 2014-07-29 22:35:12Z

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.

answered Jul 29, 2014 at 22:35

Anton Kastritskiy

1,3631 gold badge12 silver badges24 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Change image on hover with image map using css

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest