So erstellen Sie eine Webseite zum Anzeigen der Bildzuordnung

Ein Schritt von der Verwendung von Text in HTML-Hyperlinks ist die Verwendung von Bildern als Hyperlinks. Es gibt jedoch noch einen weiteren Schritt, von dem viele Menschen nichts wissen. Mit dem HTML-Tag können Sie bestimmte Abschnitte eines einzelnen Bildes mit verschiedenen Hyperlinks einrichten. Diese Funktion kann äußerst nützlich sein, wenn in Ihrem Unternehmen Karten, Diagramme und andere Bilder mit mehreren unterschiedlichen Teilen zum Einsatz kommen. Verwenden Sie einfaches HTML, um eine Webseite zu erstellen, die eine Imagemap anzeigt.

Erstellen Sie eine Imagemap

1

Öffnen Sie das Bild, das Sie in einer Imagemap erstellen möchten, in einem Bildeditor wie Microsoft Paint. Wenn Sie etwas anderes als Paint verwenden, muss das Programm über eine Koordinatenpunktfunktion verfügen.

2

Bewegen Sie den Mauszeiger über eine Ecke des Bildausschnitts, den Sie zu einem Kartenausschnitt machen möchten. Die Koordinaten (z. B. „0, 0“) blinken unten links im Paint-Fenster. Notieren Sie sie und wiederholen Sie den Vorgang für die anderen Ecken des Abschnitts. Der gesamte in den Koordinaten enthaltene Inhalt ist Teil des Kartenabschnitts.

3.

Wiederholen Sie den vorherigen Schritt für alle anderen Abschnitte, die Sie zu Image-Map-Abschnitten machen möchten. Halten Sie die Koordinatenpunkte jedes Abschnitts voneinander getrennt.

4

Öffnen Sie Ihren HTML-Editor und fügen Sie zuerst den Code für das Bild selbst ein. Es sollte dem folgenden Code ähnlich sein:

5

Geben Sie den Code für die Imagemap ein, wenn Sie fertig sind:

Ersetzen Sie die Formen und Koordinaten des Beispielcodes durch Ihre eigenen.

Erstellen Sie eine Webseite für Ihre Imagemap

1

Gehen Sie zum Anfang der HTML-Seite, die Sie am Ende des letzten Abschnitts erstellt haben, und geben Sie den folgenden Code ein:

2

Gehen Sie am unteren Rand der HTML-Seite unter dem Image-Map-Code und geben Sie den folgenden Code ein:

3.

Speichern Sie die Seite als .html- oder .htm-Datei und doppelklicken Sie darauf, um sie in Ihrem Webbrowser anzuzeigen. Die Image Map-Webseite kann jetzt im Web verwendet werden. Ihr endgültiger Webseitencode sollte folgendermaßen aussehen:

Spitze

  • Die Formen der Imagemap, die Sie verwenden können, sind "rechteckig" für Rechteck, "Kreis" für Kreis und "Poly" für Polygone. Jede Form, die kein Rechteck oder Kreis ist, ist ein Polygon.
 

Lassen Sie Ihren Kommentar