Weltkarte Positionsspezifische Links

Technisch funktioniert das mit dem HTML-Tag <map>, der mehrere anklickbare Zonen (<area>) verbindet. Diese Bereiche werden durch Koordinaten festgelegt, die angeben, wo sich der Link im Bild befindet. Das Bild selbst wird mit dem Attribut usemap mit der Karte verbunden. So entsteht ein interaktives Bild, bei dem je nach angeklicktem Bereich unterschiedliche Webseiten oder Aktionen aufgerufen werden können.

Das führt dazu, dass man nicht nur eine Weltkarte mit Links zu den Ländern versehen kann, sondern auch Details von zum Beispiel einem Produkt interaktiv gestalten kann. Allerdings wird usemap heute kaum noch verwendet, da sich beim Ändern der Browser-Skalierung die Koordinaten verschieben und nicht mehr über dem richtigen Land etc. liegen.

Positionsspezifische Links in Bildern ermöglichen es, verschiedene Bereiche eines einzelnen Bildes mit unterschiedlichen Links zu versehen, die nach dem Anklicken auf andere Websites oder Aktionen verweisen. Dadurch kann man etwa auf einer Landkarte bestimmte Regionen anklickbar machen oder in einem Produktfoto einzelne Teile mit Informationen verknüpfen.

Technisch funktioniert das mit dem HTML-Tag <map>, der mehrere anklickbare Zonen (<area>) verbindet. Diese Bereiche werden durch Koordinaten festgelegt, die angeben, wo sich der Link im Bild befindet, z. B.: left: 19%; top: 24%; (legt fest, wo die linke obere Ecke des Rechtecks relativ zum Container liegt) oder transform: translateX(-50%); (verschiebt das Element um 50 % seiner eigenen Breite nach links).

Das Bild selbst wird in diesem Fall mithilfe von CSS-Code mit der Karte verbunden. Die Eigenschaft position: relative; stellt den „Koordinatenraum“ dar, in dem die Bereiche mit den hinterlegten Links platziert werden können. Die Bereiche selbst werden mit position: absolute; dargestellt. Sie beziehen sich auf die Grenzen des Containers, damit die Links immer an der gleichen Stelle bleiben – unabhängig vom Bildschirm oder der Größe des Browserfensters.

In diesem Code ist jedes <a>-Element gleichzeitig:

ein unsichtbares klickbares Rechteck,
ein Link zu einer anderen Webseite,
ein Träger für den Tooltip.

Durch die Nutzung von <a> kann auf die Attribute von <map> und <area> verzichtet werden. Diese übernehmen sonst die Aufgaben, sie sind präziser, aber aufwändiger und komplizierter einzubauen. <a> ist zwar etwas ungenauer, aber für Projekte wie dieses oft die bessere Wahl.