HTML Bildkarten
Mit HTML-Imagemaps können Sie anklickbare Bereiche auf einem Bild erstellen.
Bildkarten
Das HTML-Tag <map> definiert eine Imagemap. Eine Imagemap ist ein Bild mit anklickbaren Bereichen. Die Bereiche werden mit einem oder mehreren <area>-Tags definiert.
Try to click on the computer, phone, or the cup of coffee in the image below:
Beispiel
Hier ist der HTML-Quellcode für die Imagemap oben:
<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>
Try it Yourself »
Wie funktioniert es?
Die Idee hinter einer Imagemap ist, dass Sie in der Lage sein sollten, unterschiedliche Aktionen auszuführen, je nachdem, wo im Bild Sie klicken.
Um eine Imagemap zu erstellen, benötigen Sie ein Bild und etwas HTML-Code, der die anklickbaren Bereiche beschreibt.
Das Bild
Das Bild wird mit dem Tag <img> eingefügt. Der einzige Unterschied zu anderen Bildern besteht darin, dass Sie ein usemap-Attribut hinzufügen müssen:
<img src="workplace.jpg" alt="Workplace" usemap="#workmap">
Der usemap-Wert beginnt mit einem Hash-Tag #, gefolgt vom Namen der Imagemap, und wird verwendet Erstellen Sie eine Beziehung zwischen dem Bild und der Imagemap.
Tipp: Sie können jedes Bild als Imagemap verwenden!
Erstellen Sie eine Imagemap
Fügen Sie dann ein <map>-Element hinzu.
Das Element <map> wird zum Erstellen einer Imagemap verwendet und mit dem Bild verknüpft, indem der erforderliche verwendet wird name Attribut:
<map name="workmap">
Das Attribut name muss denselben Wert wie das Attribut <img> von <img> haben usemap-Attribut.
Die Bereiche
Dann fügen Sie die anklickbaren Bereiche hinzu.
Ein anklickbarer Bereich wird mithilfe eines <area>-Elements 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 eine polygonale Regiondefault– definiert die gesamte Region
Sie müssen außerdem einige Koordinaten definieren, um den anklickbaren Bereich auf dem Bild platzieren zu können.
Shape="rect"
Die Koordinaten für shape="rect" liegen paarweise vor, eine für die x-Achse und eine für die y-Achse.
Die Koordinaten 34,44 liegen also 34 Pixel vom linken Rand und 44 Pixel vom oberen Rand entfernt:
Die Koordinaten 270.350 liegen 270 Pixel vom linken Rand und 350 Pixel vom oberen Rand entfernt:
Jetzt haben wir genügend Daten, um einen anklickbaren rechteckigen Bereich zu erstellen:
Dies ist der Bereich, der anklickbar wird und den Benutzer auf die Seite weiterleitet "computer.htm":
Shape="circle"
Um eine Kreisfläche hinzuzufügen, ermitteln Sie zunächst die Koordinaten des Kreismittelpunkts:
337,300
Geben Sie dann den Radius des Kreises an:
44 pixels
Jetzt verfügen Sie über genügend Daten, um einen anklickbaren kreisförmigen Bereich zu erstellen:
Dies ist der Bereich, der anklickbar wird und den Benutzer auf die Seite weiterleitet "coffee.htm":
Shape="poly"
Der shape="poly" enthält mehrere Koordinatenpunkte, wodurch eine aus geraden Linien gebildete Form (ein Polygon) entsteht.
Hiermit kann jede beliebige Form erstellt werden.
Vielleicht in Croissant-Form!
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 Croissants ermitteln:
Die Koordinaten liegen paarweise vor, 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">
Try it Yourself »
Dies ist der Bereich, der anklickbar wird und den Benutzer auf die Seite weiterleitet "croissant.htm":
Bildkarte und JavaScript
Ein anklickbarer Bereich kann auch eine JavaScript-Funktion auslösen.
Fügen Sie ein click-Ereignis zum <area>-Element hinzu, um eine JavaScript-Funktion auszuführen:
Beispiel
Hier verwenden wir das onclick-Attribut, um eine JavaScript-Funktion auszuführen, wenn auf den Bereich geklickt 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>
Try it Yourself »
Kapitelzusammenfassung
- Verwenden Sie das HTML-Element
<map>, um eine Imagemap zu definieren
- Verwenden Sie das HTML-Element
<area>, um die anklickbaren Bereiche in der Imagemap zu definieren - Verwenden Sie das HTML-Attribut
usemapdes Elements<img>, um auf eine Imagemap zu verweisen
HTML Bild-Tags
| Tag | Beschreibung |
|---|---|
| <img> | Definiert ein Bild |
| <map> | Definiert eine Imagemap |
| <area> | Definiert einen anklickbaren Bereich innerhalb einer Imagemap |
| <picture> | Definiert einen Container für mehrere Bildressourcen |
Eine vollständige Liste aller verfügbaren HTML-Tags finden Sie in unserer HTML-Tag-Referenz.
