HTML - Image Map: Ein freundlicher Leitfaden für Anfänger

Hallo da draußen, ambitionierte Web-Entwickler! Heute tauchen wir in die aufregende Welt der HTML-Bildkarten ein. Machen Sie sich keine Sorgen, wenn Sie neu hier sind; ich werde Sie bei jedem Schritt mit der gleichen Geduld führen, die ich seit Jahren in meinem Klassenzimmer verwendet habe. Lassen Sie uns gemeinsam auf diese Reise gehen!

HTML - Image Map

Warum eine Bildkarte verwenden?

Stellen Sie sich vor, Sie haben ein wunderschönes Bild einer Weltkarte auf Ihrer Webseite und Sie möchten, dass die Besucher auf verschiedene Länder klicken, um mehr über sie zu erfahren. Genau hier kommen Bildkarten ins Spiel! Sie ermöglichen es Ihnen, anklickbare Bereiche auf einem einzigen Bild zu erstellen und es zu einem interaktiven Element zu machen.

HTML `<map>`-Tag

Das <map>-Tag ist wie ein Behälter für unsere interaktiven Bereiche. Hier definieren wir den Namen der Karte, den wir später zur Verbindung mit einem Bild verwenden werden.

So sieht es aus:

<map name="worldmap">
<!-- Hier fügen wir unsere anklickbaren Bereiche hinzu -->
</map>

In diesem Beispiel haben wir unsere Karte "worldmap" genannt. Denken Sie daran wie eine eindeutige ID, die wir später verwenden werden.

HTML `<area>`-Tag

Nun kommen wir zum <area>-Tag. Hier passiert die Magie! Jedes <area>-Tag definiert einen anklickbaren Bereich in unserer Bildkarte.

Hier ist eine grundlegende Struktur:

<area shape="shape_type" coords="coordinates" href="link_url" alt="beschreibung">

Lassen Sie uns das auseinandernehmen:

shape: Definiert die Form des anklickbaren Bereichs (rect, circle, oder poly)
coords: Gibt die Koordinaten des Bereichs an
href: Die URL, die aufgerufen wird, wenn der Bereich angeklickt wird
alt: Eine Textbeschreibung des Bereichs (wichtig für die Zugänglichkeit)

HTML-Bildkarte in Aktion

Nun setzen wir alles mit einem realen Beispiel zusammen. Stellen wir uns vor, wir haben ein Bild einer Pizza und möchten, dass jeder Scheibchen anklickbar ist.

<img src="pizza.jpg" alt="Delizie Pizza" usemap="#pizzamap">

<map name="pizzamap">
<area shape="poly" coords="150,0,97,90,203,90" href="cheese.html" alt="Käsescheibe">
<area shape="poly" coords="0,90,97,90,48,180" href="pepperoni.html" alt="Pepperonischeibe">
<area shape="poly" coords="203,90,300,90,252,180" href="mushroom.html" alt="Pilzscheibe">
<area shape="poly" coords="48,180,148,180,97,90" href="veggie.html" alt="Gemüsescheibe">
<area shape="poly" coords="152,180,252,180,203,90" href="supreme.html" alt="Supremescheibe">
</map>

Lassen Sie uns das auseinandernehmen:

Wir haben ein <img>-Tag, das unser Pizza-Bild anzeigt.
Das usemap-Attribut im <img>-Tag verbindet es mit unserer Karte namens "pizzamap".
Wir definieren unsere <map> mit dem Namen "pizzamap".
Jedes <area> repräsentiert ein Scheibchen der Pizza:

Wir verwenden shape="poly" für Polygonschatten (dreieckige Scheiben).
Die coords definieren die Punkte jedes Dreiecks.
Jede Scheibe verlinkt zu einer anderen Seite über diese Pizzaart.

Arten von Formen und ihre Koordinaten

Schauen wir uns die verschiedenen Formen an, die Sie in Ihren Bildkarten verwenden können:

Form	Koordinaten	Beispiel
rect	links, oben, rechts, unten	`<area shape="rect" coords="0,0,82,126" href="square.html" alt="Quadrat">`
circle	Mittelpunkt-x, Mittelpunkt-y, Radius	`<area shape="circle" coords="90,58,3" href="circle.html" alt="Kreis">`
poly	x1,y1,x2,y2,...,xn,yn	`<area shape="poly" coords="22,0,66,0,66,44,22,44" href="poly.html" alt="Polygon">`

Denken Sie daran, dass Koordinaten in Pixeln von der oberen linken Ecke des Bildes gemessen werden!

Tipps und Tricks

Verwenden Sie einen Bildkarten-Generator: Als ich zum ersten Mal damit begann zu unterrichten, habe ich Stundenlang Koordinaten berechnet. Jetzt verwende ich Online-Tools, um sie schnell zu generieren!
Testen, testen, testen: Überprüfen Sie Ihre Bildkarte auf verschiedenen Geräten und Browsern. Was auf Ihrem Computer perfekt aussieht, könnte auf einem Smartphone durcheinander sein.
Halten Sie es einfach: Beginnen Sie mit einfachen Formen und bewegen Sie sich allmählich zu komplexeren. Rom wurde nicht an einem Tag erbaut, und perfekte Bildkarten auch nicht!
Barrierefreiheit ist wichtig: Fügen Sie immer eine beschreibende alt-Text zu jedem Bereich hinzu. Es ist nicht nur eine gute Praxis, sondern auch unerlässlich für Benutzer mit Screenreadern.

Schlussfolgerung

Glückwunsch! Sie haben gerade gelernt, wie man interaktive Bilder mit HTML-Bildkarten erstellt. Erinnern Sie sich daran, dass wie das Fahrradfahren, es am Anfang vielleicht wackelig ist, aber mit Übung werden Sie schnell komplexe Bildkarten erstellen können.

Das nächste Mal, wenn Sie eine interaktive Grafik auf einer Webseite sehen, werden Sie die Magie dahinter verstehen. Wer weiß, vielleicht werden Sie inspiriert, etwas noch cooler für Ihre eigene Seite zu erstellen!

Weiter codieren, weiter lernen und vor allem: Spaß daran haben! Wenn Sie jemals stecken bleiben, denken Sie daran: Jeder Experte war einmal ein Anfänger. Viel Spaß beim Kartenerstellen!

Credits: Image by storyset