MSO-Webdesign. Ihr Webdesigner

Anklickbare Karte

Anklickbare Karte

Mittwoch, 17. März 2021

Wie kann man eine Karte mit Informationen füttern? Früher war das ganz einfach, mit <map> und <area href="">, aber da heute alle Websites eine flexible Breite haben, geht das so nicht mehr. Was also tun?

Erst brauchen wir eine Karte (unten). Wir setzen sie als Hintergrund in ein <div>.

css:
.karte { height: 0; width: 100%; margin: 0 0 40px 0; padding-bottom: 56%; position: relative; background-image: url(bilder/karte920.gif); background-repeat: no-repeat; background-size: contain; }

Dann erstellen wir die Links für die Ortsnamen:

css:
.karte a, .karte a:link, .karte a:visited, .karte a:hover, .karte a:active, .karte a:focus { display: inline-block; width: 130px; height: 30px; color: #000; font-size: 0.87em; font-weight: 500; text-decoration: none; }

Wir positionieren die Punkte immer relativ im css:

.nicht { display: none; }
.bs { position: absolute; top: 78%; left: 22%; }
.ri { position: absolute; top: 58%; left: 29%; }
.bn { position: absolute; top: 13%; left: 60%; }
.la { position: absolute; top: 64%; left: 61%; }

Damit sind Position und Größe der Links über der Karte festegelegt.

Nun benutzen wir die Fancybox (http://fancybox.net/) zum Öffnen der Infos:

html:
<div class="karte">
<a class="inline bs" href="#data1">Bad Säckingen</a>
<a class="inline ri" href="#data2">Rickenbach</a>
<a class="inline bn" href="#data3">Bonndorf</a>
<a class="inline la" href="#data4">Lauchringen</a>
</div>

Wenn die Fancybox eingerichtet ist, bewirkt das class="inline", dass ein Fenster mit der Info geöffnet wird. Und href="#data1" bezeichnet den Inhalt der ersten Infobox. Diese Inhalte werden direkt in die Seite eingesetzt, wobei .nicht { display: none; } bewirkt, dass man diese Kästen nicht schon auf der Seite selbst sehen kann.

Hier ist nun das Ergebnis. Wer es ganz genau wissen möchte, schaut sich einfach den Quelltext dieser Seite an.

Durch klicken auf die Standorte erfahren Sie unsere Ansprechpartner.

Kontaktdaten

MSO-Webdesign
Marco Schwarz
Widhagstr. 5
D-79713 Bad Säckingen
Ortsteil Wallbach
+49 7761 99 83 080
info@mso-webdesign.de

Kontaktdaten

MSO-Webdesign
Marco Schwarz
Widhagstr. 5
D-79713 Bad Säckingen
Ortsteil Wallbach
+49 7761 99 83 080
info@mso-webdesign.de

Zurück