'making the <area> in a <map> tag visible during development

I am trying to use the <area> and <map> tags to make parts of images be links. But I don't know how to make the mapped area visible to control where it is exactly (except watching where the cursor becomes a pointer, but that's too tedious...)

So if I use the following example code, how can I make the polygon visible on top of the image in order to edit it more effectively?

I tried to add a class attribute to both the map and the area which has a border defined in CSS, but that didn't work: If I add it to the <map> tag, it's shown outside the image (next to the right bottom corner), if I add it to <area>, nothing is displayed at all.

<img src="mypicture.gif" width="300" height="200" usemap="#mymap1">
<map name="mymap1">
  <area shape="poly" coords="120,80,130,70,50,90,120,180,50" href="mylink.html" class="x">
</map>

CSS:

.x {
  border: 1px solid red;
  }

Additional remark after getting answers: I need it it to edit the link areas, those areas are not supposed to be visible all the time and also not only on hover. The Firefox addon mentioned in the accepted answer is perfect - it shows the areas all the time and even allows editing, adding additional polygon nodes etc.

htmlcssscipyscipy-optimize-minimize


Solution 1:[1]

Click anywhere on the picture not-clickable area, then just push the Tab key on your keybord. The outline border should highlight around each shape. I've also added mouseover coords, it can be helpful to draw coords.

var img = document.getElementById('img');
var coords = document.getElementById('coords');
img.addEventListener('mousemove', function(event){

  coords.innerHTML = "x: " + event.offsetX + "<br/>y: " + event.offsetY;
});
area {
  outline-color: white;
}
<img id="img" src="http://lorempixel.com/400/200/sports/" usemap="#mymap1">

<map name="mymap1">
  <area shape="poly" coords="120,80,130,70,50,90,120,180,50" href="mylink.html" class="x" tabindex="0">
  <area shape="circle" coords="220,80,30" href="mylink.html" class="x" tabindex="0">
  <area shape="rect" coords="270,130,330,170" href="mylink.html" class="x" tabindex="0">
</map>

<p id="coords"></p>

Solution 2:[2]

After some research i managed to make the clickable area visible in the end product, though i did not use map for it.

styles.css:

body {
  background-color: gray;
}
.imageContainer {
  display: inline-block;
  position: relative;
  text-align: center;
}
.boxx {
  border: 1px solid red;
  position: absolute;
}

file.html:

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="with=device-with, initial-scale=1" />
    <link rel="stylesheet" href="data/styles.css" />
    <title>Title</title>
  </head>

  <body>
    <div class="imageContainer">
      <img src="data/_start-1.jpeg" width="1000px" />
      <a href="data/001.html">
        <div
          style="left: 400px; top: 200px; width: 350px; height: 300px"
          class="boxx"
        ></div
      ></a>
    </div>
  </body>
</html>

Solution 3:[3]

If the purpose is just to create maps and correctly visualize the position of the coordinates, as you mentioned, to facilitate the development of html maps there are several sites that do this visually for free and give you the ready code:

They are great tools, and there are many others besides these, unfortunately for development there are no simple alternatives for this if you want to do the code coordinates by hand.

I wanted to record in this answer these development alternatives for those who are going through this.

Solution 4:[4]

var img = document.getElementById('img');
var coords = document.getElementById('coords');
img.addEventListener('mousemove', function(event){

  coords.innerHTML = "x: " + event.offsetX + "<br/>y: " + event.offsetY;
});
area {
  outline-color: white;
}
<img id="img" src="https://picsum.photos/600/400" alt="" usemap="#mymap1">

<map name="mymap1">
  <area shape="poly" coords="120,80,130,70,50,90,120,180,50" href="mylink.html" class="x" tabindex="0">
  <area shape="circle" coords="220,80,30" href="mylink.html" class="x" tabindex="0">
  <area shape="rect" coords="270,130,330,170" href="mylink.html" class="x" tabindex="0">
</map>

<p id="coords"></p>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 online Thomas
Solution 2 Mario Petrovic
Solution 3 KevynTD
Solution 4 andr3ss

Related Questions