making the in a tag visible during development

Question

I am trying to use the <area> and <map> tags to make parts of images behave as 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 (without focusing or hovering) 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.

This might be of some use: [Visible Area tag?](http://stackoverflow.com/questions/1906734/visible-area-tag) — Cave Johnson, Feb 15 '17 at 19:11

score 11 · Answer 1 · edited May 18 '21 at 09:16

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>

About Tabulator - I bet this is the best answer! – Peter Lozovitskiy Sep 10 '20 at 11:03 — Peter Lozovitskiy, Sep 10 '20 at 11:03

score 3 · Accepted Answer · answered Feb 15 '17 at 19:04

3

As far as I know, this is not possible. If you need to show those areas, you need to add absolute positioned elements, containing the links.

In case you only need that for development, there is a handy firefox extension, which can help you.

It is of course possible to generate visible area using javascript, probably this jQuery plugin can help you.

answered Feb 15 '17 at 19:04

philipp

15,947
15
61
106

in fact I really only need it for development, so that Firefox extension you pointed me to is perfect - it even allows editing and adding additional polygon nodes! Great - thank you very much! – Johannes Feb 16 '17 at 13:02

score 2 · Answer 3 · answered Apr 17 '22 at 19:15

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.

score 0 · Answer 4 · edited Dec 19 '21 at 21:45

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>

score 0 · Answer 5 · answered May 21 '22 at 21:39

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>

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). — KiynL, May 22 '22 at 06:39

making the in a tag visible during development

5 Answers5

Linked

Related