machen die `<area>` in einem `<map>` Tag während der Entwicklung sichtbar

Ich versuche, die <area> und <map> Tags zu verwenden, um Teile von Bildern zu Links zu machen. Aber ich weiß nicht, wie man den gemappten Bereich sichtbar macht, wo er genau ist (außer zu beobachten, wo der Cursor zum Zeiger wird, aber das ist zu langweilig ...)machen die `<area>` in einem `<map>` Tag während der Entwicklung sichtbar

Also wenn ich den folgenden Beispielcode benutze, Wie kann ich das Polygon oben auf dem Bild sichtbar machen, um es effektiver zu bearbeiten?

Ich habe versucht, ein class Attribut zu der Karte und dem Bereich hinzufügen, der eine Grenze in CSS definiert hat, aber das hat nicht funktioniert: Wenn ich es zum <map> Tag hinzufügen, wird es außerhalb des Bildes angezeigt (neben die rechte untere Ecke), wenn ich es zu <area> hinzufüge, wird überhaupt nichts angezeigt.

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

Zusätzliche Bemerkung nach Antworten bekommen: Ich brauche es es die Verbindungsbereiche zu bearbeiten, werden diese Bereiche nicht angeblich die Zeit sichtbar sein alles und auch nicht nur auf schweben. Das Firefox-Addon, das in der angenommenen Antwort erwähnt wird, ist perfekt - es zeigt die Bereiche die ganze Zeit und erlaubt sogar das Editieren, das Hinzufügen zusätzlicher Polygonknoten usw.

Quelle

2017-02-15 Johannes

Dies könnte von Nutzen sein: [sichtbaren Bereich Tag?] (Http://stackoverflow.com/questions/1906734/visible-area-tag) –

Soweit ich weiß, ist dies nicht möglich. Wenn Sie diese Bereiche anzeigen müssen, müssen Sie absolut positionierte Elemente hinzufügen, die die Verknüpfungen enthalten.

Falls Sie nur für die Entwicklung brauchen, gibt es eine handliche firefox extension, die Ihnen helfen kann.

Es ist natürlich möglich, sichtbaren Bereich mit Javascript, wahrscheinlich this jQuery Plugin kann Ihnen helfen, zu generieren.

Quelle

2017-02-15 19:04:36 philipp

in der Tat habe ich wirklich nur brauche es für die Entwicklung, so dass die Firefox-Erweiterung, auf die du mich hingewiesen hast, perfekt ist - es erlaubt sogar das Bearbeiten und Hinzufügen zusätzlicher Polygon-Knoten! Großartig, vielen Dank! – Johannes

Klicken Sie auf eine beliebige Stelle auf dem nicht klickbaren Bildbereich, und drücken Sie dann einfach die Taste Tabulator auf Ihrem Keyboard. Der Umrissrahmen sollte um jede Form herum hervorgehoben werden. Ich habe auch mouseover coords hinzugefügt, es kann hilfreich sein, Coords zu zeichnen.

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>

Quelle

2017-02-15 19:28:49

machen die `<area>` in einem `<map>` Tag während der Entwicklung sichtbar

Antwort

Verwandte Themen