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

Question

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.

Answer 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>

Answer 2

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.