title: making the <area> in a <map> tag visible during development
body: <p>I am trying to use the <code>&lt;area&gt;</code> and <code>&lt;map&gt;</code> tags to make <em>parts</em> 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...)</p>
  <p>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?</p>
  <p>I tried to add a <code>class</code> 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 <code>&lt;map&gt;</code> tag, it's shown outside the image (next to the right bottom corner), if I add it to <code>&lt;area&gt;</code>, nothing is displayed at all.</p>
  <pre><code>&lt;img src=&quot;mypicture.gif&quot; width=&quot;300&quot; height=&quot;200&quot; usemap=&quot;#mymap1&quot;&gt;
  &lt;map name=&quot;mymap1&quot;&gt;
    &lt;area shape=&quot;poly&quot; coords=&quot;120,80,130,70,50,90,120,180,50&quot; href=&quot;mylink.html&quot; class=&quot;x&quot;&gt;
  &lt;/map&gt; 
  </code></pre>
  <p>CSS:</p>
  <pre><code>.x {
    border: 1px solid red;
    }
  </code></pre>
  <p>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.</p>