Ingo Turski: Imagemap + pure CSS Popup = geht nicht?

Beitrag lesen

Hi,

Hab das Bild mal online gestellt, um die Fisseligkeit zu zeigen

Du hast die Karte vermutlich so wie sie ist? Das Herausschneiden von rechteckigen Bereichen mit den einzelnen Sehenswürdigkeiten sollte Dir keine Probleme machen. Ein gutes Bildbearbeitungsprogramm sollte Dir hierbei auch die x/y-Position der oberen linken Ecke im Bild anzeigen - diese notierst Du Dir mit den herausgeschnittenen Bildmaßen.

Nun bearbeitest Du diese Ausschnitte etwas nach, um einen Highlight-Effekt zu bekommen. Überlappungen sind hier ohne Bedeutung.

Jetzt brauchst Du ein position:relative div#Karte in der Größe der Gesamtgrafik, in das Du das Bild setzt.
Hierüber kannst Du dann die Links setzen, display:block in den Größen der Bilder und absolut positioniert mit den notierten Koordinaten für top und left. Darin dann je ein span mit dem Infotext.

Im CSS setzt Du zunächst die div#Karte a span auf display:none und definierst dann für div#Karte a#IDxxx:hover die kleinen Grafiken als Hintergrund und blendest den div#Karte a#IDxx:hover span wieder ein.

Wenn Dir das mit der Bearbeitung der Grafiken zu aufwendig ist, könntest Du den Links vielleicht auch nur einen title geben und auf die Markierung verzichten.

freundliche Grüße
Ingo