HTML -Imagemaps
Mit HTML-Imagemaps können Sie anklickbare Bereiche auf einem Bild erstellen.
Imagemaps
Das HTML <map>-Tag definiert eine Imagemap. Eine Imagemap ist ein Bild mit anklickbaren Bereichen. Die Bereiche werden mit einem oder mehreren <area>Tags definiert.
Versuchen Sie, auf den Computer, das Telefon oder die Tasse Kaffee im Bild unten zu klicken:
Beispiel
Hier ist der HTML-Quellcode für die obige Imagemap:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
<map name="workmap">
<area shape="rect" coords="34,44,270,350"
alt="Computer" href="computer.htm">
<area shape="rect" coords="290,172,333,250"
alt="Phone" href="phone.htm">
<area shape="circle" coords="337,300,44"
alt="Coffee" href="coffee.htm">
</map>
Wie funktioniert es?
Die Idee hinter einer Imagemap ist, dass Sie in der Lage sein sollten, verschiedene Aktionen auszuführen, je nachdem, wo Sie im Bild klicken.
Um eine Imagemap zu erstellen, benötigen Sie ein Bild und HTML-Code, der die anklickbaren Bereiche beschreibt.
Das Bild
Das Bild wird über das <img>Tag eingefügt. usemapDer einzige Unterschied zu anderen Bildern besteht darin, dass Sie ein Attribut hinzufügen müssen :
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
Der usemapWert beginnt mit einem Hash-Tag
#gefolgt vom Namen der Imagemap und wird verwendet, um eine Beziehung zwischen dem Bild und der Imagemap herzustellen.
Tipp: Sie können jedes Bild als Imagemap verwenden!
Imagemap erstellen
Fügen Sie dann ein <map>Element hinzu.
Das <map>Element wird zum Erstellen einer Imagemap verwendet und über das erforderliche name
Attribut mit dem Bild verknüpft:
<map name="workmap">
Das nameAttribut muss den gleichen Wert haben wie das
<img>Attribut usemapdes .
Die Gebiete
Fügen Sie dann die anklickbaren Bereiche hinzu.
Ein anklickbarer Bereich wird über ein <area>Element definiert.
Form
Sie müssen die Form des anklickbaren Bereichs definieren und können einen dieser Werte auswählen:
rect- definiert einen rechteckigen Bereichcircle- definiert einen kreisförmigen Bereichpoly- definiert einen polygonalen Bereichdefault- definiert die gesamte Region
Sie müssen auch einige Koordinaten definieren, um den anklickbaren Bereich auf dem Bild platzieren zu können.
Form="recht"
Die Koordinaten für shape="rect"kommen paarweise, eine für die x-Achse und eine für die y-Achse.
Die Koordinaten 34,44befinden sich also 34 Pixel vom linken Rand und 44 Pixel vom oberen Rand entfernt:
Die Koordinaten 270,350befinden sich 270 Pixel vom linken Rand und 350 Pixel vom oberen Rand entfernt:
Jetzt haben wir genug Daten, um einen anklickbaren rechteckigen Bereich zu erstellen:
Beispiel
<area shape="rect" coords="34, 44, 270, 350" href="computer.htm">
Dies ist der Bereich, der anklickbar wird und den Benutzer auf die Seite "computer.htm" weiterleitet:
Shape="Kreis"
Um einen Kreisbereich hinzuzufügen, suchen Sie zuerst die Koordinaten des Kreismittelpunkts:
337,300
Geben Sie dann den Radius des Kreises an:
44Pixel
Jetzt haben Sie genug Daten, um einen anklickbaren kreisförmigen Bereich zu erstellen:
Beispiel
<area shape="circle" coords="337, 300, 44" href="coffee.htm">
Dies ist der Bereich, der anklickbar wird und den Benutzer zur Seite "Kaffee.htm" weiterleitet:
Form="poly"
Das shape="poly"enthält mehrere Koordinatenpunkte, wodurch eine aus geraden Linien gebildete Form (ein Polygon) entsteht.
Damit lassen sich beliebige Formen erstellen.
Wie vielleicht eine Hörnchenform!
Wie können wir das Croissant im Bild unten zu einem anklickbaren Link machen?
Wir müssen die x- und y-Koordinaten für alle Kanten des Hörnchens finden:
Die Koordinaten kommen paarweise, eine für die x-Achse und eine für die y-Achse:
Beispiel
<area shape="poly" coords="140,121,181,116,204,160,204,222,191,270,140,329,85,355,58,352,37,322,40,259,103,161,128,147" href="croissant.htm">
Dies ist der Bereich, der anklickbar wird und den Benutzer zur Seite "croissant.htm" weiterleitet:
Imagemap und JavaScript
Auch ein anklickbarer Bereich kann eine JavaScript-Funktion auslösen.
Fügen Sie clickdem Element ein Ereignis <area>hinzu, um eine JavaScript-Funktion auszuführen:
Beispiel
Hier verwenden wir das Attribut onclick, um eine JavaScript-Funktion auszuführen, wenn der Bereich angeklickt wird:
<map name="workmap">
<area shape="circle" coords="337,300,44"
href="coffee.htm" onclick="myFunction()">
</map>
<script>
function
myFunction() {
alert("You clicked the coffee cup!");
}
</script>
Kapitelzusammenfassung
- Verwenden Sie das HTML
<map>-Element, um eine Imagemap zu definieren - Verwenden Sie das HTML
<area>-Element, um die anklickbaren Bereiche in der Imagemap zu definieren - Verwenden Sie das HTML -
usemapAttribut des<img>Elements, um auf eine Imagemap zu verweisen
HTML-Bild-Tags
| Tag | Description |
|---|---|
| <img> | Defines an image |
| <map> | Defines an image map |
| <area> | Defines a clickable area inside an image map |
| <picture> | Defines a container for multiple image resources |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz .