Sie sind hier: Startseite -> HTML-Grundlagen -> Bilder -> Image-Map

HTML-Grundlagen: Image-Map

Image-Map: Grafik als Landkarte

Die Image Map lässt sich als "Bild-Landkarte" übersetzen und das trifft es ziemlich gut, denn eine Image Map ist genau das: eine Landkarte von Bildbereichen, wie man sie öfter auf einer Webseite antrifft. Für die Besucher/innen spielt das keine so wesentliche Rolle, Hauptsache, sie gelangen zu den gewünschten Unterseiten, für die Betreiber der Webseiten ist die Image Map oft der einzig gangbare Weg.

Eine Image Map hat als Grundlage einmal ein Bild, aber dieses Bild kann auch zum Beispiel eine Navigation sein. Nun besteht das Problem, dass man ein Bild leicht verlinken kann, aber eben nur mit einem Link, zum Beispiel mit einer Produktseite. Wenn man aber das Bild mehrfach verlinken will, dann geht das mit der normalen HTML-Verlinkung nicht.

Bei obigen Beispiel wurde eine Grafik als Imagemap geschaltet und es wurden zwei Links eingebaut. Diese wurden durch das X/Y-Koordinatensystem festgelegt, das bedeutet, dass die ersten beiden Zahlen den X/Y-Punkt der linken oberen Ecke des Linkbereiches und die beiden letzten Werte den X/Y-Punkt des rechten unteren Punktes festgelegt haben. Klickt man in diesen Bereich, wird der Link aktiviert und man wird weitergeleitet.

Durch diese Technik ist es möglich, eine grafische Navigation beispielsweise in einer halbrunden Anordnung aufzubauen, was mit CSS und anderen Formatierungsmöglichkeiten nicht der Fall ist.

Allerdings ist man von der Möglichkeit oft bereits abgerückt, weil sie auf einer grafischen Darstellung beruht. Da die Barrierefreiheit wichtiger denn je ist und beispielsweise blinde Menschen wenig damit anfangen können (durch den Alt-Text sind die Links wenigstens nutzbar), haben viele Webseitenbesitzer eine bravere, aber effektivere Navigation vorgesehen.

Dennoch ist die Imagemap eine denkbare Lösung.

Ebenfalls interessant:

Img-Tag

Informationen über den Img-Tag, mit dem man Grafiken in eine Webseite einbinden kann.

[aktuelle Seite]

Image-Map

Informationen über die Image-Map, womit mehrere Links mit einem Bild verknüpft werden können.

Banner

Informationen über den Banner bzw. Werbebanner, der für die Online-Werbung wichtig ist und im Webdesign berücksichtigt werden muss.

Soziale Medien

Wenn der Artikel gefallen und/oder geholfen hat, bitte teilen:

Zurück zum Hauptthema

Übersicht Bilder

Startseite HTML-Grundlagen