css hover effect on custom shape images

Question

i have a map of a coutry..my task is at hover effect on each district they will glow..i dont know how do i perfectly do it..i could use html map tag like:

<img src="district1.png" width="xxx" height="yyy" alt="d1" usemap="#d1_map">
<map name="d1_map">
        <area shape="poly" coords="0,0, 35,36, 82,126 .... " styles="....">
</map>

but this is not perfection as u know a map doesnt have polygonal shape..so any other idea?? thanks in advance..

http://stackoverflow.com/questions/13845958/how-to-get-the-path-coordinates-of-a-shape-for-use-with-image-maps — Alok Jain, Jan 19 '14 at 13:40
http://stackoverflow.com/questions/15649184/image-hover-when-over-area-map - Image hover when over area map — MortenMoulder, Jan 19 '14 at 13:55

score 0 · Answer 1 · answered Jan 19 '14 at 16:42

Divide each area of the map using the area tags inside a map tag;
Assign an id or class for your map (e.g. <map class="mymap">);
Use CSS to create a box-shadow around your area when it's hovered:

.mymap area:hover{ box-shadow:0 0 15px #ffffff }

This should make your areas glow when the mouse hovers them. Basically, you assign a class to the map to easily target its children through CSS. This way, you don't have to assign a class for every area. After that, you target its children and use the :hover event to apply that code to the area when the mouse hovers it. I am really curious if it works but it should.

css hover effect on custom shape images

1 Answers1