HTML
Imagemaps
Suche…
Syntax
-
<img usemap="#[map-name]"> -
<map name="[map-name]"></map> -
<area>
Parameter
| Tag / Attribut | Wert |
|---|---|
<img> | Nachfolgend sind die imagemap-spezifischen Attribute aufgeführt, die mit <img> . Es gelten reguläre <img> -Attribute. |
usemap | Der name der Karte mit vorangestelltem Hash-Symbol. Für eine Karte mit name="map" sollte das Bild beispielsweise usemap="#map" . |
<map> | |
name | Der Name der Karte, um sie zu identifizieren. usemap mit dem usemap Attribut des Bildes usemap . |
<area> | Nachfolgend sind <area> -spezifische Attribute aufgeführt. Wenn href angegeben wird, wobei <area> einem Link wird, unterstützt <area> auch alle Attribute des Ankertags ( <a> ) mit Ausnahme von ping . Sehen Sie sie in den MDN-Dokumenten . |
alt | Der alternative Text, der angezeigt werden soll, wenn Bilder nicht unterstützt werden. Dies ist nur notwendig, wenn auch href im <area> . |
coords | Die Koordinaten, die den auswählbaren Bereich umreißen. Wenn shape="polygon" , sollte dies auf eine Liste von durch Kommas getrennten "x, y" -Paaren gesetzt werden (dh shape="polygon" coords="x1, y1, x2, y2, x3, y3, ..." ). Wenn shape="rectangle" , sollte dies auf left, top, right, bottom . Wenn shape="circle" , sollte dies auf centerX, centerY, radius . |
href | Die URL des Hyperlinks, falls angegeben. Wenn es weggelassen wird, repräsentiert der <area> keinen Hyperlink. |
shape | Die Form des <area> . Kann so eingestellt werden , um die default das gesamte Bild (keine auszuwählen coords Attribut erforderlich) circle oder circ für einen Kreis, rectangle oder rect für ein Rechteck und polygon oder poly für einen polygonalen Bereich , der durch Eckpunkte spezifiziert. |
Bemerkungen
Die obige Parameterliste wird aus den MDN-Dokumenten geändert:
<map>und<area>.Es ist möglich, die Koordinaten einer Imagemap für ein Bild mit einfacheren Formen (wie im einleitenden Beispiel oben) mit einem Bildeditor zu erstellen, der Koordinaten anzeigt (wie beispielsweise GIMP). Es kann jedoch allgemein einfacher sein, einen Imagemap-Generator wie diesen zu verwenden .
Einführung in Imagemaps
Beschreibung
Ein Imagemaps ist ein Bild mit anklickbaren Bereichen, die normalerweise als Hyperlinks dienen.
Das Bild wird durch das <img> -Tag definiert, und die Karte wird durch ein <map> -Tag mit <area> -Tags definiert, um jeden anklickbaren Bereich anzugeben. Verwenden Sie die Attribute usemap und name , um das Bild und die Karte zu binden.
Basisbeispiel
So erstellen Sie eine Imagemap, sodass jede der Formen im Bild unten anklickbar ist:
Der Code würde wie folgt lauten:
<img src="http://jaced.com/blogpix/2007/trisquarecircle/002.gif" usemap="#shapes">
<map name="shapes">
<area shape="polygon" coords="79,6,5,134,153,134">
<area shape="rectangle" coords="177,6,306,134">
<area shape="circle" coords="397,71,65">
</map>
Sie sollten sehen, dass der Browser die Bereiche erkennt, wenn der Cursor zum Zeiger wird. Sehen Sie sich eine Live-Demo auf JSFiddle an, oder sehen Sie sich eine Demonstration unten an:
