Drehteller

Demonstration einer Kombination Imagemap/Eventhandler

Die aktuelle Blickrichtung beträgt 360 Grad.

Erläuterung dieser Demonstration

Imagemaps

Eine Imagemap (engl. Image Map) ist eine „Bildkarte“, mit der innerhalb eines Bildes mehrere anklickbare Bereiche („Hotspots“) definiert werden können. Diese Bereiche lassen sich beispielsweise mit Hyperlinks oder JavaScript-Funktionen belegen.

Im konkreten Fall wird das Bild per Koordinatenangaben, die von mir mit dem Bildbetrachter IrfanView ausgemessen wurden, in acht Segmente unterteilt. Jeder Segment-Hotspot übergibt per EventHandler „onMouseOver“ beim Überfahren des Bereiches einen Wert an eine Funktion. Diese Funktion wechselt dann das Bild gegen ein Bild mit der passenden Blickrichtung und gleichzeitig die Richtungsangabe im Text unter dem Bild.

Man kann sich eine Imagemap wie eine Folie vorstellen, die alle nötigen Koordinaten und Funktionsbelegungen enthält. Diese Folie erhält im Befehl „<map>“ als Parameter einen Namen, der im Bildbefehl per „usemap=“ aufgerufen wird. Damit liegt quasi die Folie mit den Koordinaten auf dem Bild.

Bei Einbindung mittels „usemap“ ist die Raute vor dem Namen wichtig. Damit wird angegeben, dass sich die Imagemap im aktuellen Dokument befindet. Ansonsten müsste statt der Raute der Pfad zu der HTML-Datei mit dem Imagemap angegeben werden.

Definierbare Hotspots

Es gibt drei mögliche Hotspot-Formen für Imagemaps:

1. shape="circle" (Kreis) mit drei Pixelwerten:
   Mittelpunkt von links
   Mittelpunkt von oben
   Radius
2. shape="rect" (Rechteck) mit vier Pixelwerten:
   Obere linke Ecke von links
   Obere linke Ecke von oben
   Untere rechte Ecke von links
   Untere rechte Ecke von oben
3. shape="poly" (Vieleck) mit zwei Werten je Eckpunkt:
   Punkt 1 von links
   Punkt 1 von oben
   Punkt 2 von links
   Punkt 2 von oben
   Punkt 3 von links
   Punkt 3 von oben
   usw.

Beim Vieleck ist die Angabe der Punkte in der richtigen Reihenfolge wichtig, aber nicht die Richtung (also im oder gegen den Uhrzeigersinn).

Außerdem muss bei Imagemaps generell sichergestellt sein, dass sich keine Hotspots überschneiden. Ein direktes Angrenzen, wie bei der Demonstration auf dieser Seite, ist okay.

Problem bei responsiven Webseiten

Heute werden Webseiten responsiv aufgebaut, d.h. sie passen sich bei unterschiedlichen Bildschirmgrößen (Monitor, Laptop, Tablet, Mobiltelefon) automatisch an. Der Nachteil von Imagemaps ist, dass dann zwar das Bild skaliert wird, die darüberliegende Imagemap aber nicht automatisch mitskaliert. Damit stimmen die Positionen der Hotspots bei anderen Bildschirmgrößen nicht mehr.

Lösung mit SVG

Es gibt eine Lösung mittels SVG-Overlay, bei denen sich die Koordinaten einer veränderten Bildgröße über eine im Code definierte Vektorgrafik automatisch anpassen würden. Leider entspricht das nicht dem Unterrichtsthema „Imagemaps“, denn die Technik ist eine andere. Deswegen habe ich eine weitere Lösung gewählt.

Lösung mit Scrollbalken

Um eine Imagemap trotz responsiver Webseite mit unverändert großem Bild demonstrieren zu können, werden auf dieser Seite bei zu kleiner Auflösung Scrollbalken am Bild eingeblendet. Das Bild muss damit nicht mehr mitskaliert werden und alle Hotspots bleiben erhalten.

Erstellungsdatum

Diese Programmdemonstration wurde im März 2024 von Gerd Schiefer erstellt.