Was ist eine Imagemap? Einfach erklärt!
Eine Imagemap ist eine grafische Darstellung, bei der bestimmte Bereiche oder Flächen der Grafik klickbar sind und mit einer URL oder Webadresse verknüpft werden. Klickt ein Nutzer auf einen dieser anklickbaren Bereiche oder Flächen, wird er zu einer bestimmten Seite weitergeleitet. Die Verknüpfung kann entweder auf eine interne oder externe Zieladresse führen oder auch einfach nur zu Informationen auf derselben Seite. Imagemaps können helfen, die Usability von Websites zu verbessern und die Navigation für den Nutzer zu erleichtern.
Wo werden Imagemaps eingesetzt?
Imagemaps werden häufig für die Navigation auf Webseiten eingesetzt, um dem Nutzer ein interaktives Erlebnis zu bieten. Mit einer Imagemap können Nutzer beispielsweise auf eine interaktive Grafik klicken, um zu einem bestimmten Abschnitt der Webseite zu gelangen oder Informationen zu erhalten. Dies kann insbesondere für komplexe Webseiten nützlich sein, um die Navigation zu vereinfachen und die Usability zu verbessern.
Einige weitere Beispiele zur Veranschaulichung der vielfältigen Möglichkeiten von Imagemaps sind:
- Produktbeschreibungen: Eine Imagemap kann genutzt werden, um verschiedene Teile eines Produkts interaktiv zu beschreiben, indem Nutzer auf die entsprechenden Teile klicken und detaillierte Informationen erhalten.
- Bildergalerien: Eine Imagemap kann genutzt werden, um eine interaktive Bildergalerie zu erstellen, indem Nutzer auf bestimmte Teile des Bildes klicken und weitere Bilder oder Informationen erhalten.
- Werbebanner: Imagemaps können Werbebanner in verschiedene Produkte/Kategorien einteilen.
- Bild mit Zutaten für ein Gericht: Wenn du mit dem Mauszeiger auf eine Zutat klickst, erhältst du einen kurzen Überblick über diese.
- In Videos: Durch Imagemaps können zusätzliche Werbungen oder Informationen eingebettet werden.
- Interaktive Landkarten: Eine Imagemap kann genutzt werden, um eine interaktive Karte zu erstellen, auf der Nutzer beispielsweise auf bestimmte Orte oder Sehenswürdigkeiten klicken können, um weitere Informationen zu erhalten.
Vorteile und Nachteile von Imagemaps
Imagemaps können die Nutzerführung auf Webseiten durch die Verwendung von bildbasierten Inhalten verbessern, was eine intuitivere Navigation ermöglicht. Es kann jedoch vorkommen, dass die Funktion der Imagemap vom Benutzer nicht erkannt wird, und die Anzahl der verlinkten Objekte sollte begrenzt sein, um eine Überforderung des Benutzers zu vermeiden. Ein Nachteil von verweis-sensitiven Grafiken ist, dass sie in deaktivierten Bildern oder reinen Textbrowsern nicht sichtbar sind, was die Barrierefreiheit beeinträchtigt.
Wie wird eine Imagemap erstellt?
Um eine Imagemap im HTML-Code zu kennzeichnen, wird das <map name> Element verwendet. Der Name des Maps dient als Ankerpunkt, um das richtige Ziel innerhalb der Grafik zu erreichen. Nach dem Namen folgen Anweisungen im Code, um bestimmte Bereiche in der Grafik festzulegen, von denen aus verlinkt werden soll.
Damit eine Imagemap korrekt funktioniert, sind folgende Attribute erforderlich:
- Das <img> Element, das das Bild enthält, auf das die Imagemap angewendet wird.
- Das <map-name> Element mit einem Namen-Attribut, das mit dem <img> Element verknüpft wird.
- <usemap> Elemente, die innerhalb des <map> Elements definiert werden und die verlinkten Bereiche der Imagemap definieren.
Zur Kennzeichnung der Eckpunkte der verlinkten Bereiche gibt es drei Möglichkeiten, die durch das shape-Attribut angegeben werden:
- „rect“ für rechteckige oder viereckige Bereiche, die durch Koordinaten für den oberen linken und unteren rechten Punkt definiert werden.
- „circle“ für kreisförmige Bereiche, die durch Koordinaten für den Mittelpunkt und einen Radius definiert werden.
- „poly“ für Bereiche mit unregelmäßigen Formen (Vielecke), die durch eine Liste von Koordinatenpaaren definiert werden.
Das coords-Attribut wird verwendet, um die Pixel-Koordinaten innerhalb der Grafik für die verlinkten Bereiche anzugeben, z.B. für shape=rect coords=x1,y1,x2,y2. Mit Pixeln werden bestimmte Stellen in der Grafik markiert. Diese Koordinaten (Coords) können mit einem Bildbearbeitungsprogramm ermittelt werden, da während der Mauszeigerbewegung in der Statusleiste des Programms immer die jeweiligen Koordinaten angezeigt werden.
Wie bei einem normalen Link dient das href-Attribut bei einer Imagemap als Verweis auf die Zielseite. Wenn ein Benutzer auf den verlinkten Bereich der Imagemap klickt, wird er zur Seite navigiert, die im href-Attribut angegeben ist.
Das alt-Attribut wird verwendet, um einen Alternativtext anzugeben, der anstelle der Imagemap in reinen Textbrowsern angezeigt wird. Das title-Attribut wird verwendet, um einen Kurzhinweis hinzuzufügen, der angezeigt wird, wenn ein Benutzer mit der Maus über die verlinkte Fläche fährt. Durch das title-Attribut kann der Benutzer zusätzliche Informationen über den Link erhalten, bevor er darauf klickt.
Sind die notwendigen Angaben für die Imagemap vollständig, kannst du die Grafik im HTML-Code an der gewünschten Stelle einfügen, ähnlich wie bei einem normalen Bild, indem du den img-Tag verwenden. Die Imagemap wird dann im Code mit dem map-Tag und dem dazugehörigen name-Attribut verknüpft, sodass die verlinkten Bereiche der Grafik korrekt mit den Zielseiten verknüpft sind.
Imagemap generieren lassen
Wenn die zuvor beschriebene Methode zu kompliziert ist, kann eine verweissensitive Grafik auch mithilfe eines Imagemap Generators wie dem Online Imagemap Editor erstellt werden.
Hierbei wird das Bild hochgeladen und durch Auswahl bestimmter Bereiche können Linkziele hinzugefügt und die Schaltflächen generiert werden. Anschließend kann das Ganze automatisch in HTML umgewandelt und in den Code eingefügt werden (unter Verwendung des img-Tags).
Die Verwendung eines Imagemap Generators hat den Vorteil, dass die Erstellung der Map schneller und unkomplizierter ist und nachträgliche Anpassungen erleichtert werden.
Imagemaps aus SEO-Sicht
Da die Links in Imagemaps nicht sofort sichtbar sind, sondern erst erscheinen, wenn man mit dem Mauszeiger drüber wandert, wurden sie oft für Spam-Zwecke missbraucht. Aus diesem Grund folgen die meisten Suchmaschinen den Links in Imagemaps nicht. Wenn du eine Imagemap als Navigation verwenden möchtest, solltest du unbedingt eine Ersatznavigation angeben.