Area Map mit SVG

Area Map oder Image Map besser mit SVG

SVG anstelle der klassischen Area Map oder Image Map ist responsive ohne Aufwand und selbst komplexe Formen sind viel einfacher zu erstellen.

Mit dem Erscheinen der mobilen Geräte schwindet die Area Map zunehmend vom Schirm, denn die Navigation über die Hotspots der Image Map werden in Pixeln angegeben. Das Anlegen der Hotspots ist mühselig und die Umstellung auf die Darstellung auf kleinen und großen Monitoren zu aufwändig.

Die Vorteile von SVG für Area Maps

Area Maps bilden aber durchaus eine sinnvolle und kompakte Benutzerschnittstelle für Diagramme, Lagepläne und Karten.

SVG hingegen ist einfach an die Größe des Viewports anzupassen und die Hotspots bleiben bei den Anpassungen der Grafik an das Browserfensters intakt.

Weil CSS bei SVG genauso genauso wirkt wie bei HTML, sind Übergänge und kleine Animationen kein Thema. SVG nimmt Bitmap-Bilder auf und kann neben SVG-Grafiken auch Landkarten, Handzeichnungen oder Fotos als Grundlage einbinden.

map-in-inkscape
Hotspots einzeichnen mit Inkscape oder Illustrator

Die Hotspots werden als SVG-Formen angelegt, z.B. in Inkscape, einem Open Source Programm für Vektorgrafik, ähnlich wie Adobe Illustrator (mit dem SVG Area Maps natürlich auch eingezeichnet werden können).

Auch Photoshop kann in den neueren Versionen Pfade als SVG exportieren.

photoshop-svg-export
Pfade in Photoshop anlegen und als SVG exportieren

Hotspots mit IDs versehen

Die Formen der Hotspots sind Pfade, Kreise oder Rechtecke. Wichtig ist nur, dass jeder Hotspot eine ID bekommen, damit er von Javascript eindeutig identifiziert werden kann.

<path id="poggendehl" class="shape" d="m202.8 241.3v36.4l23 2.4 1.3 57.1 91 2.4 3.7-95.9z"/>
<text class="label" id="text-poggendehl" x="50" y="720" font-size="48">Poggendehl – Kleine Familienfeiern</text>

Wenn die Image Map auf andere Seiten leitet, muss für jeden Hotspot ein Link gesetzt werden. SVG Links sehen kaum anders aus als HTML-Links (nur xlink:href anstelle von href). Sie führen zu den angepeilten Adresse, falls die Image Map zur Navigation eingesetzt wird.

<a xlink:href="landschaenke.olde-koek-raum.html">
   <path id="oldekoek" d=" … " />
</a>

CSS für die Area Map

CSS Regeln werden genauso wie bei HTML in ein style-Tag am Anfang der SVG-Datei eingesetzt.

<svg height="100%" width="100%" viewBox="0 0 1043 787">

<style>
  .shape { cursor:pointer; fill: white; fill-opacity: 0; }
  .label { fill: hsl(120,50%,20%); opacity: 0; transition: opacity 1s; }
  .toggle {opacity: 1}
  #rect { fill: ivory; opacity: 0; transition: opacity 1s; }
</style>

<image xlink:href="data:image/jpeg;base64,/9j/4QAYRXhpZgAASUkqAAgAAAAAAAA…5//Z " height="787" width="1043" y="-1.114" x="4.186" preserveAspectRatio="none"/>

Area Map mit Einblendungen

Im Lageplan der historischen Landschänke werden Texte zu den Räumen eingeblendet.

Gaststube – Platz für rd. 10 Gäste Poggendehl – Kleine Familienfeiern Großer Festsaal – bis zu 80 Gäste Alte Scheune – bis zu 80 Gäste Niederrhein aus dem Bilderbuch Kegelbahn – Gruppen bis 16 Personen Biergarten – Bis zu 120 Gäste Jagdzimmer – Familen und kleine Vereine Alde Koek – die alte Küche Pergola – Pergola und Wintergarten

Javascript für Area Maps

Wenn die Area Map anstelle von Links zu anderen Seiten Einblendungen zeigt, setzen einige Zeilen Javascript die CSS-Transitions der Image Map in Gang.

var shape = document.querySelectorAll("path");
for (var i=0; i<shape.length; i++) {
   shape[i].ontouch = 
   shape[i].onmouseover = function () {
      document.getElementById("text-" + this.id).classList.toggle("toggle");
      document.getElementById("rect").classList.toggle("toggle");
      console.log ()
   }
   shape[i].ontouchend = 
   shape[i].onmouseout = function () {
      document.getElementById("text-" + this.id).classList.toggle("toggle");
      document.getElementById("rect").classList.toggle("toggle");
      console.log ()
   }
}

document.getElementById("text-" + this.id) sucht das Element mit derselben ID und dem Präfix text-, so muss nicht jedes Element einzeln angesprochen werden.

ontouch und onmouseover lauschen auf die Aktionen des Benutzers, bei touchend bzw. mouseout wird die CSS-Klasse toggle »ausgetoggelt«.

SVG Area Map einbinden

Obwohl SVG auch in einem img-Tag geladen werden kann, muss SVG entweder direkt ins HTML gesetzt werden oder als iFrame in die Seite geladen werden, denn mit einem img-Tag wird kein Javascript in SVG ausgeführt.

AREA Map