HTML -Tutorial

HTML-HOME HTML-Einführung HTML-Editoren HTML-Basis HTML-Elemente HTML-Attribute HTML-Überschriften HTML-Absätze HTML-Stile HTML-Formatierung HTML-Zitate HTML-Kommentare HTML-Farben HTML-CSS HTML-Links HTML-Bilder HTML-Favicon HTML-Tabellen HTML-Listen HTML-Block und Inline HTML-Klassen HTML-ID HTML-Iframes HTML-JavaScript HTML-Dateipfade HTML-Kopf HTML-Layout HTML-responsiv HTML Computercode HTML-Semantik HTML-Styleguide HTML-Entitäten HTML-Symbole HTML-Emojis HTML-Zeichensatz HTML-URL-Codierung HTML vs. XHTML

HTML -Formulare

HTML-Formulare HTML-Formularattribute HTML-Formularelemente HTML-Eingabetypen HTML-Eingabeattribute HTML-Eingabeformularattribute

HTML -Grafiken

HTML-Leinwand HTML-SVG

HTML- Medien

HTML-Medien HTML-Video HTML-Audio HTML-Plugins HTML-YouTube

HTML -APIs

HTML-Geolokalisierung HTML-Drag/Drop HTML-Webspeicher HTML-Webworker HTML-SSE

HTML- Beispiele

HTML-Beispiele HTML-Quiz HTML-Übungen HTML-Zertifikat HTML-Zusammenfassung HTML-Barrierefreiheit

HTML -Referenzen

HTML-Tag-Liste HTML-Attribute Globale HTML-Attribute HTML-Browser-Unterstützung HTML-Ereignisse HTML-Farben HTML-Leinwand HTML-Audio/Video HTML-Doctypes HTML-Zeichensätze HTML-URL-Codierung HTML-Sprachcodes HTTP-Nachrichten HTTP-Methoden PX-zu-EM-Konverter Tastatürkürzel

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:

Arbeitsplatz Sun Mercury Venus

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 Bereich
  • circle - definiert einen kreisförmigen Bereich
  • poly - definiert einen polygonalen Bereich
  • default - 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:

Arbeitsplatz

Die Koordinaten 270,350befinden sich 270 Pixel vom linken Rand und 350 Pixel vom oberen Rand entfernt:

Arbeitsplatz

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:

Arbeitsplatz

Shape="Kreis"

Um einen Kreisbereich hinzuzufügen, suchen Sie zuerst die Koordinaten des Kreismittelpunkts:

337,300

Arbeitsplatz

Geben Sie dann den Radius des Kreises an:

44Pixel

Arbeitsplatz

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:

Arbeitsplatz

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?

Französisches Essen

Wir müssen die x- und y-Koordinaten für alle Kanten des Hörnchens finden:

Französisches Essen

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:

Französisches Essen

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 .