開発中に<map>タグの「<area>」を表示する

Question

<area>と<map>タグを使用して画像の一部をリンクにしようとしています。しかし、私はマップされた領域を正確にどこを制御するために表示するかわかりません（カーソルがポインタになる場所を見る以外は面倒ですが...）

次のサンプルコードを使用すると、イメージをより効果的に編集するために、ポリゴンをイメージの上に表示させるにはどうすればよいですか？

class属性をマップとCSSで境界が定義されている領域の両方に追加しようとしましたが、機能しませんでした。<map>タグに追加すると、画像の外側に表示されます右下隅）、それを<area>に追加すると、何も表示されません。

<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; 
    } 

追加発言答えを取得した後：私はそれがリンクエリアを編集することが必要で、それらの領域は、すべての時間表示され、また、だけでなく、ホバーには想定されていません。受け入れられた答えに記載されているFirefoxのアドオンは完璧です。常に領域を表示し、編集やポリゴンノードの追加なども可能です。

Answer 1

私の知る限り、これは不可能です。これらの領域を表示する必要がある場合は、リンクを含む絶対配置要素を追加する必要があります。

開発に必要な場合は、firefox extensionが便利です。

javascriptを使用して可視領域を生成することはもちろん可能ですが、おそらくthis jQueryプラグインが役に立ちます。

Answer 2

画像のクリック不可領域の任意の場所をクリックしてから、キーボードのTabulatorキーを押してください。アウトラインの境界線は、各図形の周りで強調表示されます。 私はマウスオーバー用の座標を追加しました。これは、座標を描画するのに役立ちます。

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>