Responsive Image-Map ohne Plugin: Einfach skalierbare Bilder

Mit Image-Maps ist es möglich, verschiedene Bereiche eines Bildes (Punkt, Vierecke und auch freie Elemente) klickbar zu machen: Neben dem Klick funktionieren aber auch onmouseover und onmouseout, um verschiedene Effekte zu realisieren und den Besucher mit der Grafik interagieren zu lassen.

Für Responsive-Webseiten, bei der sich die Seite an das Bildformat des Anzeigegerätes anpasst und die Bilder dann teilweise skaliert werden, ist das aber nichts: Die Pixel-Angaben funktionieren nicht mehr, wenn das Bild über den Browser verkleinert wird: Stattdessen braucht man ein Plugin oder jQuery, um die Bilder weiter knickbar zu machen – oder eine SVG Grafik!

 
Alternative: Skalierbare SVG-Map mit PNG/JPG Bild

Eine Möglichkeit, Plugins zu umgehen und den Effekt der Image-Maps weiter zu behalten, ist die Nutzung von SVG Grafiken: Dies sind Vektorgrafiken, die sich beliebig skalieren lassen – auch hier lassen sich aber Links auf feste Positionen setzen, genau wie bei einer Image-Map: Diese behalten dann ihre Position bei, auch wenn die Grafik skaliert wird – die Links funktionieren dann immer noch – und das, obwohl sie als feste Koordinaten angegeben wurden.

Die SVG Grafik, die man jetzt für die neue, responsive Imagemap nutzt, muss aber nicht zwingend eine Vektorgrafik sein: Es lassen sich auch weiterhin Fotos und Bilder in den klassischen Pixel-Formaten PNG, JPG oder GIF verwenden! Damit ist die SVG Grafik mit Map-Koordinaten ein praktischer Nachfolger der Image-Map für das Responsive Webdesign.

Beispiel-Code für SVG Image-Maps:

Dieser Beispiel-Code lässt sich direkt in den bestehenden HTML-Code der Webseite einfügen und erstellt darin eine SVG Grafik mit einem darin platzierten PNG-Bild. Dies ist dann bereits automatisch responsive und passt sich automatisch an die Browser-Größe an.

<figure id="map">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
      viewBox="0 0 1500 2037" >
		
<image width="1500" height="2037" xlink:href="karte-deutschland-computerhilfen.png"></image>

<a xlink:href="https://www.computerhilfen.de"><circle cx="678" cy="419" r="115" opacity="0" /></a>
<a xlink:href="https://www.computerhilfen.de"><circle cx="1252" cy="681" r="156" opacity="0" /></a>
<a xlink:href="https://www.computerhilfen.de"><circle cx="633" cy="852" r="66" opacity="0" /></a>

</svg>
</figure>

In der SVG Grafik sind außerdem drei Links enthalten, die sich ebenfalls an die skalierbare Grafik anpassen und immer funktionieren – selber bei kleinem Browser-Fenster. Wie das aussieht, zeigt dieses Beispiel mit runden, klickbaren Kreisen.

Das dies auch wirklich für responsive Webseiten funktioniert und sich die SVG Image Map an die Breite des Browser-Fensters anpasst, sieht man, wenn man das Beispiel in einem neuen Fenster öffnet und die Breite des Fensters verändert.

Koordinaten in SVG Image-Maps:

Um in den SVG Image-Maps klickbare Koordinaten anzugeben, hat man die Wahl zwischen runden Punkten, Rechtecken und Polygonen. Alle Werte lassen sich mit einem Grafikprogramm ablesen oder mit einem Programm für Image-Maps wie “Fast Image Map” (Windows) auslesen – dabei muss man aber den Code für die neue SVG Map anpassen. Man kann die SVG Datei aber auch mit Vektor-Programmen wie Adobe Illustrator oder Inkscape exportieren: Dabei lassen sich die Pfade ebenfalls mit speichern und später als Text kopieren.

 
Runde Fläche

Dies erzeugt eine runde, klickbare Fläche, 500 Pixel von dem linken Rand und 150 Pixel von dem oberen Rand entfernt mit einem Radius von 40 Pixeln:

<a xlink:href="https://www.computerhilfen.de">
   <circle cx="500" cy="150" r="40" opacity="0" />
</a>

 
Rechteckige Fläche

Dies erzeugt ein klickbares Rechteck mit jeweils 100 Pixeln Höhe und Breite, 100 Pixel vom oberen und vom linken Rand entfernt:

<a xlink:href="https://www.computerhilfen.de">
   <rect x="100" y="100" opacity="0" width="100" height="100" />
</a>

 
Klickbares Polygon

Dies erzeugt ein klickbares Polygon aus zahlreichen Einzel-Punkten, die in etwa den Umriss Hamburgs wiedergeben:

<a xlink:href="https://www.computerhilfen.de">
   <polygon points="256.333,178.242 250.333,164.909 250.333,159.576 262.333,155.576 269,148.909 277.667,148.909 283,154.242 275.667,168.242 285,177.576 280.333,184.242 269,176.909 263.333,182.575 " />
</a>

 
Vektor-Pfad

<a xlink:href="https://www.computerhilfen.de">
   <path fill="#FFFFFF" stroke="none" opacity="0" d="M28.21,587.91l15,1l8.667-1.667l7.333-5l6-0.667c0,0,1-2.5,2.5-2.5
s9.167,2.167,9.167,2.167l7.333,5h4.667l1.333,9.333l-3,4.667l2,7l5.333,3.667l-2.667,2.666l-2.333,6l-0.667,5.667l3,6
l-4.167,4.167l-8.167-1.167l-4.667-4.667l-3,4c0,0-1.667-6.333-2.667-7.333s-6.667-3.667-6.667-3.667h-5l-0.333,5.667
l-6.667-1.667v-4l-9.667-14v-5.333v-3l-3.333-3.333l-4.167-4.167l-5.5,1.833L28.21,587.91z"/>
</a>

Fügt man der SVG Datei noch etwas CSS hinzu, lassen sich per Hover die Flächen (circle, rect, path oder poygon) auch noch per CSS stylen: In unserem Beispiel haben wir “stroke”, die Umrandung, auf “none” gestellt, die Fläche selbst aber auf weiß. Da die “opacity” aber auf “0” gesetzt ist, sieht man das nicht – dies lässt sich aber per CSS für einen Hover-Effekt ändern:

<figure id="map">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
      viewBox="0 0 1500 2037" >

  <defs>
    <style>
      circle:hover {
	    fill: #FFFFFF;
	    opacity:0.5;
	    cursor:pointer;
	  }
    </style>
  </defs> 
		
<image width="1500" height="2037" xlink:href="karte-deutschland-computerhilfen.png"></image>

<a xlink:href="https://www.computerhilfen.de"><circle cx="678" cy="419" r="115" opacity="0" /></a>
<a xlink:href="https://www.computerhilfen.de"><circle cx="1252" cy="681" r="156" opacity="0" /></a>
<a xlink:href="https://www.computerhilfen.de"><circle cx="633" cy="852" r="66" opacity="0" /></a>

</svg>
</figure>