onHover change image when using image map

[k134563]

Hi there,

I would like to change image onHover when using imagemap(<area>,<map>,…)

Here are my HTML and related CSS:

img src=”images/circle/a.png” /
<map name=”123″ id=”123″>
<area class=”onetest” href=”#” shape=”polygon”coords=”286,89,504,31,504,134,338,180″ />
</map>

.onetest {
width: 100px;
height: 100px;
background: url(‘../images/circle/a.png’);
}

.onetest:hover {
z-index: 50;
background: url(‘../images/circle/b.png’);
}

What I want to do is that when I hover a specific area on the image, the image would change to another.

[Paulie_D]

You can’t style area tags as they aren’t in the DOM. They are just a set of coordinates.

You might want to try SVG instead.

http://stackoverflow.com/questions/5026421/apply-css-to-area-map

[Author]

Posts