Image-Map mit HTML realisieren

Grafik als Landkarte für die Navigation

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 Besucherinnen und Besucher 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.

Image-Map aufbauen

Webhosting mit viel Software bei Alfahosting (Affiliate-Link)

Bei obigen Beispiel wurde eine Grafik durch usemap="#map" 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. Das zweite Problem ist, dass durch die Handys nicht so viel Platz zur Verfügung steht und die X/Y-Koordinaten auch zum Problem werden können, wenn die Grafik verkleinert wird, weil sie dann nicht mehr stimmen.

Dennoch ist die Imagemap eine denkbare Lösung und ein kreativer Ansatz.

Lesen Sie auch

Webhosting bei Alfahosting - jetzt gratis testen! (Affiliate-Link)

Die Bilder kommen eigentlich mit dem img-Tag alleine aus, sind aber enorm wichtig für den Gesamteindruck, wobei das auch vom Thema abhängt. Der img-Tag lässt sich verschieden ergänzen wie mit dem wichtigen ALT-Zusatz als Textinformation zum Bild und dann gibt es auch noch die Image-Map als Navigationsvariante auf Basis eines Hintergrundbildes.

Themenseiten

Startseite HTML-Grundlagen

Image-Map mit HTML realisieren

Grafik als Landkarte für die Navigation

Image-Map aufbauen

Lesen Sie auch

Diesen Artikel teilen

Infos zum Artikel

Kategorien

Interner Bereich