Als ich vor ein paar Jahren an einem Projekt für die SBB arbeitete, musste ich eine sogenannte «Image-Map» implementieren – ein Bild, mit dem der Besucher interagieren kann und welches passend zur Bildschirmgrösse skalieren soll. Seither habe ich meine Technik immer weiter verbessert.
Durch meinen Fokus auf grafisch ansprechende Projekte verwende ich heute eine Lösung, die Scalable Vector Graphics (kurz SVG) verwendet. Dadurch ist nicht nur die Interaktion, sondern auch die Qualität der Grafiken garantiert. Ich konnte die neuste Version der Idee in 2019 implementieren: eine interaktive Kartenansicht, die den Stadtrat in Toronto abbildet. Wir erhielten das Projekt, nachdem die Beraterin in Kanada auf meinem ursprünglichen Blogbeitrag gelandet ist.
Die vorherige Lösung aus 2017 basierte auf JavaScript, damit sie in allen Grössen funktionierte. Da SVG standardmässig flexibel reagieren – vorausgesetzt, du bereitest dein CSS und SVG entsprechend vor – ist die aktuelle Lösung viel schlanker.
Ein SVG ist im Wesentlichen eine Art XML-Datei. Daher ist es einfach, eine Ansicht wie die oben genannte in Adobe Illustrator (oder ähnlich) vorzubereiten und daraus ein SVG zu erstellen. Dabei soll jeder SVG-Pfad eine eigene Identifizierung erhalten. (Vorzugsweise einen CSS-Klassennamen). Da die meisten Grafikdesigner mit Illustrator arbeiten, ist das Hinzufügen des Klassennamens oder der ID zu jedem Pfad ziemlich schnell erledigt, nachdem die SVG exportiert und optimiert ist.
Einmal aufbereitet, bindet man das SVG in ein DIV oder eine SECTION ein, welcher/s mit position: relative versehen ist. In dieser Lösung habe ich das ursprüngliche SVG ohne Hintergrundbild dupliziert und diese Kopie in den Container mit position: absolute auf einen höheren z-index gesetzt. Somit deckt sie das ursprüngliche SVG transparent ab und ermöglicht es mir, die einzelnen paths mit Hyperlinks zu wrappen. Die finale Lösung ist aus zwei Schichten gebaut; die unterste für die grafische Darstellung und die zweite für die Interaktion. Auf jeden path in der oberen Schicht setzte ich einen onclick-Event mit JavaScript, um weitere Information für den Besucher bei Mausinteraktion anzuzeigen.
Das interaktive Aussehen des Pfads, welches du bei Interaktion mit der Karte merken wirst, funktioniert ganz einfach durch :hover-Regeln in CSS. Mit SVG arbeitet man übrigens mit fill und stroke, nicht border und background.
path {transition: all 150ms ease; stroke-width: 0;}
path:hover {stroke: #333; stroke-width: 21px;}
Da wir keine expliziten width und height-Attribute auf den HTML-Elementen setzen, adaptieren sich die beiden SVGs an die Grösse des umfassenden Elements. Obwohl die Karte in dieser Lösung auf kleineren Bildschirmen nicht gut lesbar ist, verhebt die implementierte Lösung zur Skalierung der Ansicht Und ganz ohne JavaScript oder komplexem CSS.
