2

I have an image map with several coordinates, I would like an on hover effect for each section. The effect should only appear for the section which is currently on hover and the other sections should stay as normal

Image map:

 <!-- Calculations based on an original image (width,height)=(3106,2071) -->
<img src="http://imagemap-generator.dariodomi.de/uploads/160410_151558_5a93c70d827455Ae.jpg" alt="" usemap="#Map" style="height: 715px; width: 1075px;">
<map name="Map" id="Map">
    <area alt="" title="" href="http://www.google.com" shape="poly" coords="382,37,522,37,589,157,521,276,382,278,313,158">
    <area alt="" title="" href="http://www.facebook.com" shape="poly" coords="171,158,309,160,379,279,311,399,170,398,101,279">
    <area alt="" title="" href="http://www.example.com" shape="poly" coords="315,400,380,281,517,283,590,401,520,520,384,521">
    <area alt="" title="" href="http://www.mail.google.com" shape="poly" coords="524,521,593,405,729,404,801,522,732,644,592,641">
    <area alt="" title="" href="http://www.random.com" shape="poly" coords="737,397,801,281,943,281,1013,400,945,521,803,520">
    <area alt="" title="" href="http://www.ebay.com" shape="poly" coords="525,277,595,159,731,158,800,277,733,396,592,398">
    <area alt="" title="" href="http://www.instagram.com" shape="poly" coords="735,157,803,37,941,37,1011,156,943,276,804,276">
</map>

Desired on hover effect:

 img.grayscale {
    filter: url("data:image/svg+xml;utf8,&lt;svg xmlns=\'http://www.w3.org/2000/svg\'&gt;&lt;filter id=\'grayscale\'&gt;&lt;feColorMatrix type=\'matrix\' values=\'0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0.3333 0.3333 0.3333 0 0 0 0 0 1 0\'/&gt;&lt;/filter&gt;&lt;/svg&gt;#grayscale"); /* Firefox 10+, Firefox on Android */
    filter: gray; /* IE6-9 */
    -webkit-filter: grayscale(100%); /* Chrome 19+, Safari 6+, Safari 6+ iOS */
}
Anthony Larbalestier
  • 21
  • 4
  • http://stackoverflow.com/questions/12661124/how-to-apply-hovering-on-html-area-tag - seems like a similar question – andrey Apr 10 '16 at 15:15

1 Answers1

0

I do not think you can do that with map area, but you can do it with svg:

<svg  id="Map" style="height: 715px; width: 1075px;">
   <a xlink:href="http://www.google.com"><polygon points="382,37,522,37,589,157,521,276,382,278,313,158"/></a>
   <a xlink:href="http://www.facebook.com"><polygon points="171,158,309,160,379,279,311,399,170,398,101,279"/></a>
   <a xlink:href="http://www.example.com"><polygon points="315,400,380,281,517,283,590,401,520,520,384,521"/></a>
   <a xlink:href="http://www.mail.google.com"><polygon points="524,521,593,405,729,404,801,522,732,644,592,641"/></a>
   <a xlink:href="http://www.random.com"><polygon points="737,397,801,281,943,281,1013,400,945,521,803,520"/></a>
   <a xlink:href="http://www.ebay.com"><polygon points="525,277,595,159,731,158,800,277,733,396,592,398"/></a>
   <a xlink:href="http://www.instagram.com"><polygon points="735,157,803,37,941,37,1011,156,943,276,804,276"/></a>
</svg>

and css:

svg#Map {background:url(http://imagemap-generator.dariodomi.de/uploads/160410_151558_5a93c70d827455Ae.jpg); 
background-size:cover;
}

#Map polygon {fill:rgba(0,0,0,0)}
#Map polygon:hover {
 fill:rgba(0,0,0,0.3)
}

see this fiddle: https://jsfiddle.net/grassog/akgs3zyt/

Giuseppe
  • 846
  • 5
  • 10