Second or 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: link

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

See that you can change the color of the pseudo-class :link , however this is most likely a matter of user-agent accessibility. Here's how this element is rendered by the Browser:

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

Butnotethatbydefaulttheareahasdisplay:none

link

Solutions for your case

Use some plugin type Mapper.js

link

Or you can build a responsive map about an image as in this example

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

Here is a tool to help you find the percentages to position the links under the image. link

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

(This technique does not apply if you use the width of .container in%, that does not work)

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.br/" 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>