HTML - Bildkarte

Vorbereitung des Bildes

Bei der Erstellung einer Image Map ist der erste Schritt die Auswahl eines Bildes, das den Inhalt und das Design Ihrer Webseite ergänzt. Das Bild sollte klar, ansprechend und für die geplanten klickbaren Bereiche relevant sein. Sobald Sie ein Bild ausgewählt haben, stellen Sie sicher, dass es webfreundlich ist, indem Sie seine Größe und sein Format optimieren. Große Bilder können die Ladezeit Ihrer Webseite verlangsamen, daher ist es wichtig, ein Gleichgewicht zwischen Bildqualität und Dateigröße zu finden. Gängige webfreundliche Bildformate sind JPEG, PNG und GIF.

Nach der Vorbereitung des Bildes müssen Sie die klickbaren Bereiche festlegen. Dies sind die spezifischen Regionen des Bildes, mit denen Benutzer durch Klicken interagieren können. Berücksichtigen Sie das Layout und den Inhalt Ihres Bildes und entscheiden Sie, welche Bereiche klickbar sein sollen. Sie können Bildbearbeitungssoftware oder Online-Tools verwenden, um die Koordinaten dieser Bereiche zu bestimmen, die bei der Definition der Image Map benötigt werden.

Verwendung des <map>-Elements

Um eine Image Map zu erstellen, müssen Sie das <map>-Element in Ihrem HTML-Code verwenden. Das <map>-Element ist ein Container für die klickbaren Bereiche Ihres Bildes. Es erfordert ein eindeutiges name-Attribut, das die Image Map identifiziert.

<map name="meineImageMap">
  <!-- Hier werden klickbare Bereiche definiert -->
</map>

Ersetzen Sie "meineImageMap" durch einen beschreibenden Namen für Ihre spezifische Image Map.

Um die Image Map mit Ihrem Bild zu verknüpfen, müssen Sie das usemap-Attribut im <img>-Element verwenden. Der Wert des usemap-Attributs sollte der name Ihrer Image Map sein, dem ein Rautezeichen (#) vorangestellt ist.

<img src="bild.jpg" alt="Mein Bild" usemap="#meineImageMap">

Stellen Sie sicher, dass der name im usemap-Attribut mit dem name übereinstimmt, den Sie im <map>-Element definiert haben.

Definition klickbarer Bereiche mit <area>

Innerhalb des <map>-Elements können Sie die klickbaren Bereiche mit dem <area>-Element definieren. Jedes <area>-Element repräsentiert einen bestimmten Bereich des Bildes, mit dem Benutzer interagieren können. Das <area>-Element hat mehrere Attribute, die die Form, die Koordinaten und den Hyperlink des klickbaren Bereichs definieren.

Das shape-Attribut legt die Form des klickbaren Bereichs fest. Es kann Werte wie "rect" für einen rechteckigen Bereich, "circle" für einen kreisförmigen Bereich oder "poly" für einen polygonalen Bereich haben.

Die Koordinaten des klickbaren Bereichs werden mit dem coords-Attribut angegeben. Das Format der Koordinaten hängt von der gewählten Form ab. Für rechteckige Bereiche müssen Sie die Koordinaten der oberen linken und unteren rechten Ecke angeben (x1, y1, x2, y2). Für kreisförmige Bereiche müssen Sie die Mittelpunktkoordinaten und den Radius angeben (Mittelpunkt-x, Mittelpunkt-y, Radius). Für polygonale Bereiche müssen Sie eine Reihe von Koordinaten für jeden Punkt des Polygons angeben (x1, y1, x2, y2, ..., xn, yn).

Um dem klickbaren Bereich einen Hyperlink hinzuzufügen, verwenden Sie das href-Attribut. Der Wert des href-Attributs sollte die URL oder der Ankerlink sein, zu dem navigiert werden soll, wenn auf den Bereich geklickt wird.

<map name="meineImageMap">
  <area shape="rect" coords="0,0,100,100" href="seite1.html" alt="Bereich 1">
  <area shape="circle" coords="200,150,50" href="seite2.html" alt="Bereich 2">
  <area shape="poly" coords="300,50,350,100,300,150" href="seite3.html" alt="Bereich 3">
</map>

In diesem Beispiel werden drei klickbare Bereiche definiert: ein rechteckiger Bereich, ein kreisförmiger Bereich und ein polygonaler Bereich. Jeder Bereich hat seine eigenen Koordinaten und Hyperlinks.

Durch die Kombination des <map>-Elements, des usemap-Attributs im <img>-Element und der <area>-Elemente können Sie eine interaktive Image Map erstellen, die es Benutzern ermöglicht, auf verschiedene Bereiche des Bildes zu klicken und zu verschiedenen Seiten zu navigieren oder bestimmte Aktionen auszuführen.

Rechteck (shape="rect")

Ein rechteckiger klickbarer Bereich wird mit dem Attribut shape="rect" definiert. Um die Koordinaten eines rechteckigen Bereichs anzugeben, müssen Sie die Werte für coords in folgender Reihenfolge angeben: coords="x1,y1,x2,y2".

<map name="myImageMap">
  <area shape="rect" coords="50,50,200,150" href="rectangle.html" alt="Rechteckiger Bereich">
</map>

In diesem Beispiel wird ein rechteckiger Bereich mit der oberen linken Ecke bei den Koordinaten (50, 50) und der unteren rechten Ecke bei den Koordinaten (200, 150) definiert. Bei einem Klick wird zur Seite rectangle.html navigiert.

Kreis (shape="circle")

Ein kreisförmiger klickbarer Bereich wird mit dem Attribut shape="circle" definiert. Um die Koordinaten eines kreisförmigen Bereichs anzugeben, müssen Sie die Werte für coords in folgender Reihenfolge angeben: coords="center-x,center-y,radius".

<map name="myImageMap">
  <area shape="circle" coords="300,200,50" href="circle.html" alt="Kreisförmiger Bereich">
</map>

In diesem Beispiel wird ein kreisförmiger Bereich mit seinem Mittelpunkt bei den Koordinaten (300, 200) und einem Radius von 50 Pixeln definiert. Bei einem Klick wird zur Seite circle.html navigiert.

Polygon (shape="poly")

Ein polygonaler klickbarer Bereich wird mit dem Attribut shape="poly" definiert. Um die Koordinaten eines polygonalen Bereichs anzugeben, müssen Sie eine Reihe von x- und y-Koordinaten für jeden Punkt des Polygons im Attribut coords angeben: coords="x1,y1,x2,y2,...,xn,yn".

<map name="myImageMap">
  <area shape="poly" coords="400,100,500,150,450,300,350,250" href="polygon.html" alt="Polygonaler Bereich">
</map>

In diesem Beispiel wird ein polygonaler Bereich mit vier Punkten definiert: (400,100), (500,150), (450,300) und (350,250). Bei einem Klick wird zur Seite polygon.html navigiert.

Durch die Verwendung dieser verschiedenen Formen - Rechtecke, Kreise und Polygone - können Sie genau definierte klickbare Bereiche auf Ihrer Image Map erstellen. Dies ermöglicht es Ihnen, eine interaktivere und ansprechendere Erfahrung für Ihre Nutzer zu schaffen, indem sie auf bestimmte Bereiche des Bildes klicken können, um zusätzliche Inhalte aufzurufen oder Aktionen auszuführen.