1

When i upload maapped areas to an image it shows correctly on hove, but when i want to show the border it appear outside the image


<div id="image_map">   
    <img src="https://i.stack.imgur.com/H6iMi.png" alt="image map example" width=500 height=332 usemap="#map_example">    
    <map name="map_example">        
        <area href="https://facebook.com" alt="Facebook" target="_blank" shape=poly coords="30,100, 140,50, 290,220, 180,280" style="border:solid"> 
        <area href="https://en.wikipedia.org/wiki/Social_media" target="_blank" alt="Wikipedia Social Media Article" shape=poly coords="190,75, 200,60, 495,60, 495,165, 275,165">     
    </map>     
</div>

I have tried setting the style border to solid but it appear outside the image, i use this site https://www.image-map.net/ to map the image, and also do it by hand but it does not work.

Here is the jsfiddle → https://jsfiddle.net/Ly1uqtj5/

j08691
  • 204,283
  • 31
  • 260
  • 272
ENERGY.SERVICES
  • 36
  • 6
  • 1
    It's not possible to do this currently in plain HTML and CSS. I suggest using SVG in this case or check out this thread for an example on how to apply CSS to map area using some JS [Adding hover effects for links in image map (area)](https://stackoverflow.com/questions/26634273/adding-hover-effects-for-links-in-image-map-area) – 18jad Nov 09 '22 at 18:05

0 Answers0