在開發過程中使'<area>`變爲'<map>`標籤

我試圖使用<area>和<map>標籤使圖像的某些部分成爲鏈接。但我不知道如何使映射區域可見，以控制它的確切位置（除了看光標變成指針的地方，但那太乏味了...）在開發過程中使'<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插件是完美的 - 它始終顯示區域，甚至允許編輯，添加額外的多邊形節點等。

來源

2017-02-15 Johannes

這可能是一些使用的：[可見區域的標籤？]其實（http://stackoverflow.com/questions/1906734/visible-area-tag） –

據我所知，這是不可能的。如果您需要顯示這些區域，則需要添加包含鏈接的絕對定位元素。

如果你只是需要開發，有一個方便的firefox extension，它可以幫助你。

當然可以使用javascript生成可見區域，可能this jQuery插件可以幫助你。

來源

2017-02-15 19:04:36 philipp

我真的只需要它進行開發，所以你指出我的Firefox擴展是完美的 - 它甚至允許編輯和添加額外的多邊形節點！太好了 - 非常感謝你！ – Johannes

點擊圖片不可點擊區域的任意位置，然後只需在密鑰箱上按Tabulator密鑰即可。輪廓邊框應突出顯示每個形狀的周圍。我也添加了mouseover coords，它可以幫助畫出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>

來源

2017-02-15 19:28:49

在開發過程中使'<area>`變爲'<map>`標籤

回答

相關問題