Image map hover opacity

html-css

#1

Hi there!

I am trying to let each part of the image map (country map) change by mouse over (opacity), but it doesn’t work.

www.gpsspeurtochten.nl

This is what I try:

CSS:

#area1:hover {
    opacity:0.7;
}
#area2:hover {
    opacity:0.7;
}

HTML:

<map name="nederland"> <area id="area1" class="area" title="" alt="" coords="291,47,312,38,326,32,340,29,353,29,354,35,359,38,364,40,366,44,365,50,361,60,361,66,355,75,355,82,361,86,367,86,372,91,375,95,378,103,384,107,385,115,381,122,374,123,371,121,365,123,356,131,348,138,341,141,336,142,331,139,324,146,317,146,311,144,296,137,292,137,286,140,276,138,274,138,265,137,263,132,263,126,267,121,266,115,265,110,266,103,261,98,260,92,265,83,266,71,269,64" shape="poly" href="http://www.gpsspeurtochten.nl/friesland/" /.....
 <area id="area2"  title="" alt=""  coords="390,25,403,22,413,17,419,16,430,17,435,20,437,26,438,37,443,41,451,46,460,47,462,53,465,55,475,59,478,62,475,79,476,87,478,99,477,109,475,118,469,128,464,136,457,131,457,123,420,84,414,84,410,85,404,78,397,69,390,68,383,72,380,76,377,83,375,90,365,84,359,84,356,79,361,64,364,58,368,49,366,39,356,36,357,29,360,26,369,30" shape="poly" href="http://www.gpsspeurtochten.nl/groningen/" ....


<img class="alignright wp-image-1907 size-full" src="https://www.gpsspeurtochten.nl/wp-content/uploads/2018/05/NLg-d-z-zh-u-f.jpg" class="area" alt="" usemap="#nederland" width="500" height="554" />
<map name="nederland"> 
<area id="area1" class="area" title="" alt="" coords="291,47,312,38,326,32,340,29,353,29,354,35,359,38,364,40,366,44,365,50,361,60,361,66,355,75,355,82,361,86,367,86,372,91,375,95,378,103,384,107,385,115,381,122,374,123,371,121,365,123,356,131,348,138,341,141,336,142,331,139,324,146,317,146,311,144,296,137,292,137,286,140,276,138,274,138,265,137,263,132,263,126,267,121,266,115,265,110,266,103,261,98,260,92,265,83,266,71,269,64" shape="poly" href="http://www.gpsspeurtochten.nl/friesland/" /> <area id="area2"  title="" alt=""  coords="390,25,403,22,413,17,419,16,430,17,435,20,437,26,438,37,443,41,451,46,460,47,462,53,465,55,475,59,478,62,475,79,476,87,478,99,477,109,475,118,469,128,464,136,457,131,457,123,420,84,414,84,410,85,404,78,397,69,390,68,383,72,380,76,377,83,375,90,365,84,359,84,356,79,361,64,364,58,368,49,366,39,356,36,357,29,360,26,369,30" shape="poly" href="http://www.gpsspeurtochten.nl/groningen/" />

</map>

How does it work? What can I change?

Kind regards,
Sam


#2

This topic was automatically closed 7 days after the last reply. New replies are no longer allowed.