Put Outline into HTML5 USEMAP

Question

I want to put edge or Outline on the image map in HTML. I tried to use:

map area{outline: 1} 

But it didn’t work!

Answer 1

Monday the W3C:

The area element represents either a hyperlink with some text and a corresponding area on an image map, or a Dead area on an image map.

Translating "The element of area represents a hyperlink with some text and a corresponding area in a image map or a dead area in a image map"

Source: https://www.w3.org/TR/2012/WD-html-markup-20120315/area.html

That means that the area is represented within the map through the coordinates. Theoretically this area is not rendered visually, it is a hyperlink referenced within the one map which in turn is "indexed" as a map of active areas on an image.

See that you can change the color of pseudo-class :link, but this is most likely due to user-agent accessibility. See how this element is rendered by the browser:

map area:link {
  outline: red auto 5px !important;
}

But note that by default the area has display:none

https://www.w3.org/TR/2012/WD-html-markup-20120315/area.html#area-display

---

Solutions for your case

Use some plugin like o Mapper.js

http://www.netzgesta.de/mapper/

Or you can build a responsive map over an image like in this example

Run the Snippet below, and then click on "Whole page" you will see the @media working, the .container with the image will increase, but will not lose the map reference.

Here’s a tool to help you find the percentages to position the links under the image. https://www.zaneray.com/responsive-image-map/

OBS: Inside the Snippet links do not work, but when vc copy to your page will work normal.

(This technique does not apply if you use the width of the .container in %, there is no certain)

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    display: flex;
}
.container {
    position: relative;
    margin: auto;
    width: 400px;
    height: 400px;
    background-image: url(http://placecage.com/400/400);
    background-position:center;
    background-size: cover;
    background-repeat: no-repeat;
}
.container a {
    background-color: rgba(255, 0, 0, .5);
}
.container a + a {
    border-radius: 50%;
    background-color: rgba(0, 255, 0, .5);
    transform: rotate(-12deg);
}
@media only screen and (max-width: 768px) {
    .container {
        width: 200px;
        height: 200px;
    }
}

<div class="container">
    <a href="https://www.google.com/" target="_black" title="Link 1" style="position: absolute; left: 42.25%; top: 26.25%; width: 10.25%; height: 7.25%; z-index: 2;"></a>
    <a href="https://www.globo.com/" target="_black" title="Link 2" style="position: absolute; left: 59%; top: 23.5%; width: 10.5%; height: 6.75%; z-index: 2;"></a>
</div>