Area Map mit SVG

Area Map oder Image Map mit SVG

SVG anstelle der klassischen Area Map oder Image Map ist ohne Aufwand responsiv und selbst komplexe Formen lassen sich mit SVG-Programmen wie Inkscape, Illustrator oder auch mit Photoshop einfacher zeichnen als das Festlegen der x/y-Koordinaten der HTML Area Map.

23-02-02 SITEMAP CSS HTML JS Basis JS Web Tutorial SVG

SVG für Area Maps

Mit dem Erscheinen der mobilen Geräte war die klassische HTML Area Map zunehmend vom Schirm verschwunden, denn die Navigation über die Hotspots der Image Map wird absolut in Pixel-Koordinaten angegeben. Mit SVG kehrt die Image Map zurück.

  • Area Maps bilden aber durchaus eine sinnvolle und kompakte Benutzerschnittstelle für Diagramme, Lagepläne, Raumplanung und Liegenschaftskarten.
  • SVG ist einfach an die Größe des Viewports anzupassen und die Hotspots bleiben bei den Anpassungen der Grafik an das Browserfensters intakt.
  • Da SVG mit PHP und Javascript erzeugt werden kann, ist die Erstellung von großen Karten und Lageplänen mit SVG automatisierbar.

Weil CSS bei SVG genauso wirkt wie bei HTML, sind Übergänge und kleine Animationen kein Thema. SVG importiert Fotos und Bitmap-Bilder und kann neben SVG-Grafiken auch Landkarten, Handzeichnungen oder Fotos als Grundlage einbinden. Die meisten CAD-Programme können SVG direkt exportieren.

  • Vertriebsleitung
  • Sales Bayern
  • Sales Nord
  • Leitung Technik
  • Technik Platz 1
  • Technik Platz 2
  • Empfang 1
  • Empfang 2
  • Technik Platz 3
  • Technik Platz 4
  • Technik Platz 5
  • Technik Platz 6
  • Technik Platz 7
  • Technik Platz 8
  • Technik Platz 9
  • Technik Platz 10
  • Geschäftsleitung
  • Leitung Technik
  • Buchhaltung
  • Meeting Raum 1
  • Meeting Raum 2
  • Konferenzraum

Hotspots erzeugen

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-exportieren
Pfade in Photoshop als Form-Ebenen anlegen und als SVG exportieren

Das Bild kann sowohl als Base64 direkt in die SVG-Datei eingebettet werden. Bei großen Bildern wächst die Bildgröße bei der Transformation zu Base64 allerdings mächtig an und es ist besser, das Bild als externe Ressource in die SVG-Datei einzubinden.

Area Map mit Einblendungen

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

landschaenke 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

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>

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");
   }
   shape[i].ontouchend = 
   shape[i].onmouseout = function () {
      document.getElementById("text-" + this.id).classList.toggle("toggle");
      document.getElementById("rect").classList.toggle("toggle");
   }
}

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«.

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-opacity: 0; }
  .label { fill: hsl(120,50%,20%); opacity: 0; transition: opacity 1s; }
  .toggle {opacity: 1}
</style>

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

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.

Konferenzraum Meeting 1 Meeting 2 Vertrieb Empfang Support Support Café