css - HTML image map - effect on hover -
i'm trying following:
i have imagemap , image, that:
<img src="worldmap.png" alt="" width="1140" height="580" usemap="#image-map" /> <map name="image-map"> <area target="" class="worldmaparea" alt="deutschland" title="deutschland" href="/germany" coords="566,102,563,107,567,112,573,113,573,104" shape="poly"> <area target="" class="worldmaparea" alt="spanien" title="spanien" href="/spain" coords="520,135,527,138,527,145,525,153,533,151,540,140" shape="poly"> </map>
it works fine, when clicking on generated polygons, page. bascially worldmap , want user able click on of countries. comes question: better visual feedback, want area, cursor on, highlighted, when hovering on it. example, when hovering on germany, opacity should higher, turns green, or whatever (thats not problem more then).
i tried style class worldmaparea hover , set opacity
.worldmaparea:hover{opacity:0.2;}
but either doesn't work @ or not need.
how can running?
btw.: javascript not possible, solution has pure html/css.
Comments
Post a Comment