SVG/Tutorials/responsive Imagemaps

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

In den letzten Jahren haben verweissensitive Grafiken oder image maps im Web an Bedeutung verloren, da die verweissensitiven Felder in festen Pixeln definiert wurden und daher für responsives Design ungeeignet sind. In SVG können Sie jedoch beliebige Rastergrafiken einbinden und mit anklickbaren, aber unsichtbaren geometrischen Grundformen kombinieren.

  • Chrome
  • Firefox
  • IE 9
  • Opera
  • Safari

Hinweis

Adventskalender 2017

Dieser Artikel ist der Beitrag zum 11. Dezember.

Zurück zum

SVG-Imagemap[Bearbeiten]

Jeder kennt die vier Präsidentenköpfe des Mount Rushmore National Memorial, aber wer kann die Namen der Präsidenten nennen? Bei einem Klick auf die Köpfe mit Maus oder Touch sollen die jeweiligen Wikipedia-Seiten aufgerufen werden.

Einbindung einer Rastergrafik[Bearbeiten]

In diesem Beispiel wird die Rastergrafik mit dem image-Element direkt in eine SVG-Datei eingebunden.

Beispiel
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 1536 1024" >
  <image width="1536" height="1024" xlink:href="mount_rushmore.jpg">
    <title>Mount Rushmore- </title>
  </image>

</svg>
Das image-Element referenziert die jpg-Grafik. Mit image eingebundene Grafiken haben keinen alt-Text, der von Screenreadern gelesen werden kann. Wie im obigen Beispiel realisiert, können Sie aber jeder Grafik einen title oder eine Beschreibung mit desc hinzufügen.
Als Attribute werden die Größenangaben eingesetzt, die sich auch im viewBox-Attribut des svg-Elements wiederfinden.
Diese Grafik ist völlig responsiv und passt sich an kleinere Viewports an.

Verweissensitive Flächen[Bearbeiten]

Beispiel
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 1536 1024" >
  <image width="1536" height="1024" xlink:href="mount_rushmore.jpg">
    <title>Mount Rushmore National Memorial</title>
  </image>

  <a xlink:href="https://de.wikipedia.org/wiki/George_Washington">
    <rect x="300" y="125" fill="#fff" opacity="0.5" width="250" height="300" />
  </a>
  <a xlink:href="https://de.wikipedia.org/wiki/Thomas_Jefferson">
    <rect x="550" y="225" fill="#fff" opacity="0.5" width="200" height="300" />
  </a>
  <a xlink:href="https://de.wikipedia.org/wiki/Theodore_Roosevelt">
    <rect x="750" y="375" fill="#fff" opacity="0.5" width="200" height="300" />
  </a>
  <a xlink:href="https://de.wikipedia.org/wiki/Abraham_Lincoln">
    <rect x="999" y="375" fill="#fff" opacity="0.5" width="200" height="300" />
  </a>
</svg>
Die Köpfe werden mit dem rect-Element oder anderen geometrischen Grundformen überdeckt. In diesem Beispiel wurden sie weiß und halbtransparent eingefärbt, um sie kenntlich zu machen.
Diese Grundformen werden von den Links umschlossen.


Beachten Sie: Da SVG ein XML-Dialekt ist, müssen sowohl image- als auch das a-Element ein schließendes Tag haben.


Gestaltung durch CSS[Bearbeiten]

Beispiel ansehen …
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
     viewBox="0 0 1536 1024" >
  <defs>
    <style>
      rect:hover {
	    fill: white;
	    opacity:0.5;
	  }
    </style>
  </defs> 

  <image width="1536" height="1024" xlink:href="mount_rushmore.jpg">
    <title>Mount Rushmore National Memorial</title>
  </image>

  <a xlink:href="https://de.wikipedia.org/wiki/George_Washington">
    <rect x="300" y="125" opacity="0" width="250" height="300" />
  </a>
  <a xlink:href="https://de.wikipedia.org/wiki/Thomas_Jefferson">
    <rect x="550" y="225" opacity="0"  width="200" height="300" />
  </a>
  <a xlink:href="https://de.wikipedia.org/wiki/Theodore_Roosevelt">
    <rect x="750" y="375" opacity="0"  width="200" height="300" />
  </a>
  <a xlink:href="https://de.wikipedia.org/wiki/Abraham_Lincoln">
    <rect x="999" y="375" opacity="0"  width="200" height="300" />
  </a>
</svg>
Die rect-Elemente haben kein fill-Attribut, so dass hier der Standardwert schwarz verwendet wird, der allerdings durch opacity: 0 transparent dargestellt wird.
Im vorangegangenen defs wurde innerhalb des style-Elements eine CSS-Festlegung getroffen, dass die Rechtecke bei :hover weiß und halbtransparent sichtbar werden sollen.
Beachten Sie: Die Mediawiki-Software kann keine SVG-Grafiken als Beispiel ausführen. Sie können diese Datei jedoch lokal abspeichern und dann ausführen.

Einbindung in HTML[Bearbeiten]

Beispiel ansehen …
<figure id="imagemap">
<svg viewBox="0 0 1536 1024" >
  <defs>
    <style>
      rect:hover {
	    fill: white;
	    opacity:0.5;
	  }
    </style>
  </defs> 
 
  <image width="1536" height="1024" xlink:href="http://wiki.selfhtml.org/images/8/82/Mount_Rushmore.jpg">
    <title>Mount Rushmore National Memorial</title>
  </image>	
  
  <a xlink:href="https://de.wikipedia.org/wiki/George_Washington">
    <rect x="300" y="125" opacity="0" width="250" height="300" />
  </a>
  <a xlink:href="https://de.wikipedia.org/wiki/Thomas_Jefferson">
    <rect x="550" y="225" opacity="0" width="200" height="300" />
  </a>
  <a xlink:href="https://de.wikipedia.org/wiki/Theodore_Roosevelt">
    <rect x="750" y="375" opacity="0" width="200" height="300" />
  </a>
  <a xlink:href="https://de.wikipedia.org/wiki/Abraham_Lincoln">
    <rect x="999" y="375" opacity="0" width="200" height="300" />
  </a>
</svg>
  <figcaption>Mount Rushmore National Memorial - Klicken Sie auf die Köpfe!</figcaption>
</figure>
Sie können SVG problemlos in HTML5 einbinden - die komplizierte Namensraumangabe des Standalone-Beispiels oben kann entfallen.
Die SVG Grafik wird in ein figure-Element geschachtelt und durch eine figcaption erläutert.


Fazit[Bearbeiten]

Durch die Integration von SVG in Ihre HTML-Webseite können Sie responsive Grafiken interaktiv erweitern. Dabei kann SVG auch durch CSS gestaltet werden.

Ein Anwendungsbereich, in dem responsive Imagemaps bsonders nützlich sind, ist die Arbeit mit interaktiven Landkarten.


Weblinks[Bearbeiten]