SVG/Tutorials/responsive Imagemaps

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Verweis-sensitive Grafiken sind Grafiken, in denen der Anwender mit der Maus auf ein Detail klicken kann. Daraufhin wird ein Verweis ausgeführt. Auf diese Weise kann der Anwender in einigen Fällen wesentlich intuitiver und schneller zu Informationen gelangen als durch lange verbale Verweislisten.

In den letzten Jahren haben HTML-Imagemaps im Web an Bedeutung verloren, da die verweissensitiven Felder in festen Pixeln definiert wurden und daher für responsives Design ungeeignet sind. In SVG kannst du jedoch beliebige Rastergrafiken einbinden und mit anklickbaren, aber unsichtbaren geometrischen Grundformen kombinieren.


SVG-Imagemap

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.[1][2]

Einbindung einer Rastergrafik

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

Einbindung einer Rastergrafik in SVG
<svg 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" 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, kannst du 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

Beispiel
<svg 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" href="mount_rushmore.jpg">
    <title>Mount Rushmore National Memorial</title>
  </image>

  <a href="https://de.wikipedia.org/wiki/George_Washington">
    <rect x="300" y="125" fill="#fff" opacity="0.5" width="250" height="300" />
  </a>
  <a href="https://de.wikipedia.org/wiki/Thomas_Jefferson">
    <rect x="550" y="225" fill="#fff" opacity="0.5" width="200" height="300" />
  </a>
  <a href="https://de.wikipedia.org/wiki/Theodore_Roosevelt">
    <rect x="750" y="375" fill="#fff" opacity="0.5" width="200" height="300" />
  </a>
  <a 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. Das rect-Element hat keinen Inhalt und wird mit /> geschlossen.

Gestaltung durch CSS

Kennzeichnung der aktiven Flächen
<svg 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" href="mount_rushmore.jpg">
    <title>Mount Rushmore National Memorial</title>
  </image>

  <a href="https://de.wikipedia.org/wiki/George_Washington">
    <rect x="300" y="125" opacity="0" width="250" height="300" />
  </a>
  ...
</svg>

Die rect-Elemente haben kein fill-Attribut, sodass 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.

Einbindung in HTML

responsive Imagemap mit SVG 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" href="Mount_Rushmore.jpg">
    <title>Mount Rushmore National Memorial</title>
  </image>	
  
 <a href="https://de.wikipedia.org/wiki/George_Washington">
   <rect x="300" y="125" opacity="0" width="250" height="300" >
     <title>George Washington&#013;(1732 - 1799)</title>
   </rect>
 </a>
 <a href="https://de.wikipedia.org/wiki/Thomas_Jefferson">
   <rect x="550" y="225" opacity="0" width="200" height="300"  >
     <title>Thomas Jefferson&#013;(1743 - 1826)</title>
   </rect>
 </a>
 <a href="https://de.wikipedia.org/wiki/Theodore_Roosevelt">
   <rect x="750" y="375" opacity="0" width="200" height="300"  >
     <title>Theodor Roosevelt&#013;(1858 - 1919)</title>
   </rect>
 </a>
 <a href="https://de.wikipedia.org/wiki/Abraham_Lincoln">
   <rect x="999" y="375" opacity="0" width="200" height="300"  >
     <title>Abraham Lincoln&#013;(1809 - 1865)</title>
   </rect>
 </a>
</svg>
  <figcaption>Mount Rushmore National Memorial - Klick auf die Köpfe!</figcaption>
</figure>

Du kannst SVG problemlos in HTML 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.

Das bisher inhaltsleere rect-Element erhält nun ein title-Element mit dem Namen und den Geburts- und Todesjahren. Durch das Sonderzeichen &#013; wird ein Zeilenumbruch eingefügt.

Frühlingsgruß

Das oben verwendete title-Element kann nicht mit CSS gestylt werden. Aus diesem Grund bauen wir nun eigene Tooltips - nur mit SVG!

Ostergruß mit eigenen Tooltips ansehen …
Empfehlung: Spiel im Frickl (oder im Seiteninspektor) mit den Werten für opacity, um zu sehen, wo sich die verweissensitiven Flächen befinden.

Das SVG-Markup enthält nun einen Link, dem eine Gruppierung mit dem Tooltip und der Beschriftung folgt:

<a href="https://de.wikipedia.org/wiki/Gartenhyazinthe">
	<path id="hyacinth" d="M0,1000 v-300 l50,50 l15-50 l25,-25 l25,100 l65-150 l225,225 l-50,150 z" />
</a>
<g class="info" transform="translate(100,500)">
	<use href="#tooltipp"  />
	<text x="200" y="45">Gartenhyazinthe
		<tspan dx="-9.2em" dy="1.2em">Hyacinthus orientalis</tspan>
	</text>
</g>

Über den Geschwisterselektor E ~ F wird der Tooltip bei :hover eingeblendet:

a, .info  {
	opacity: 0;
}		
		
a:hover ~ .info {
	opacity: 1;
	transition: all 0.5s linear;
}

Damit nicht alle nachfolgenden Tooltips bei :hover eingeblendet werden, schachteln wir alles in ein weiteres g-Element.

Fazit

Durch die Integration von SVG in deine HTML-Webseite kannst du responsive Grafiken interaktiv erweitern. Dabei kann SVG auch durch CSS gestaltet werden.

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

Inwieweit du eine solche Imagemap in ein CMS wie Wordpress einbinden kannst, muss du testen. Empfehlenswert wäre es, dort das Standalone-SVG-Dokument innerhalb eines object oder iframe einzubinden.

Hauptartikel: SVG/Tutorials/Einstieg/Einbindung#Einsatz im CMS

Die Verwendung von SVG-Grundformen bis hin zu beliebigen - auch komplexen - Pfaden ist deutlich flexibler und mächtiger in der Anwendung als die Polylines der im folgenden vorgestellten HTML-Imagemaps.

HTML-Imagemap

Die konventionelle Methode bindet innerhalb eines HTML-Dokuments auf herkömmliche Weise mit Hilfe des img-Elements eine Rastergrafik ein. Um die Grafik als verweis-sensitiv zu kennzeichnen, musst du das Attribut usemap notieren. Dieses Attribut erwartet als Wertzuweisung einen URI (den Namen des Ankers), der zu der Stelle führt, an der das zugehörige map-Element notiert ist.

Mit dem <map name="Name">-Element wird die Definition der verweis-sensitiven Flächen einer Grafik eingeleitet. Beim name-Attribut vergibst du einen Namen als Ankernamen, der nichts mit dem Dateinamen der Grafik zu tun haben muss.

Beispiel
<img src="karte.png" alt="Karte" 
     width="345" 
     height="312" 
     usemap="#Landkarte">
<map name="Landkarte">
  <area shape="rect" coords="255,132,316,150"
        href="http://www.nuernberg.de/" 
        title="Nürnberg">
</map>

Festlegen einer verweissensitiven Fläche mit area

Innerhalb des map-Elements kannst du beliebig viele verweis-sensitiven Flächen mit dem area-Element definieren.

Folgende Attribute sind erfoderlich:

  • shape: legt die Form der Fläche fest:
    • shape="rect": eine rechteckige Fläche
    • shape="circle" einen Kreis
    • shape="poly" definiert ein beliebiges Vieleck
  • coords: gibt die Koordinaten der verweis-sensitiven Flächen an. Die Pixelangaben bedeuten absolute Werte innerhalb der Grafik, die verweis-sensitiv sein soll. Trennen Sie alle Pixelwerte durch Kommata.
      • Ein Viereck (shape="rect") definieren Sie mit den Koordinaten für x1,y1,x2,y2
      • x1 = linke obere Ecke, Pixel von links
      • y1 = linke obere Ecke, Pixel von oben
      • x2 = rechte untere Ecke, Pixel von links
      • y2 = rechte untere Ecke, Pixel von oben
    • Einen Kreis (shape="circle") definieren Sie mit den Koordinaten für x,y,r
      • x = Mittelpunkt, Pixel von links
      • y = Mittelpunkt, Pixel von oben
      • r = Radius in Pixel
    • Ein Polygon (shape="poly") definieren Sie mit den Koordinaten x1,y1,x2,y2 ... xn,yn
      • x = Pixel einer Ecke von links
      • y = Pixel einer Ecke von oben
        Sie können so viele Ecken definieren, wie Sie wollen. Von der letzten definierten Ecke müssen Sie sich eine Linie zur ersten definierten Ecke hinzudenken. Diese schließt das Polygon.
  • href: Verweisziel, das aufgerufen werden soll, wenn der Anwender die verweis-sensitive Fläche anklickt. Dabei gelten die Regeln zum Referenzieren in HTML – es kann sich also um beliebige Verweisziele innerhalb oder außerhalb des eigenen Web-Projekts handeln.

Mit dem alt-Attribut notierst du Alternativtext für den Fall, dass die verweis-sensitive Fläche nicht angezeigt werden kann. Dieses Attribut ist ein Pflichtattribut, d. h. du musst es notieren, um gültiges HTML zu erzeugen.

Damit beim Überfahren einer verweis-sensitiven Fläche mit der Maus ein kleines Info-Fenster, ein sogenannter Tooltip erscheint, kannst du jeweils das Universalattribut title verwenden. Im Beispiel haben die title-Attribute jeweils dieselben Werte wie die alt-Attribute.

Beachten Sie: Du sollten keine wichtigen Informationen im title-Attribut unterbringen, da nicht sichergestellt werden kann, dass der Tooltip auch angezeigt wird.

Innerhalb eines jeden <area>-Tags ist auch das Attribut tabindex erlaubt, mit dem von einem Link zum nächsten mit der Tabulatortaste gesprungen werden kann. Ebenfalls erlaubt ist das accesskey--Attribut.

Beispiel ansehen …
  <img src="Karte-deutschland-sw.jpg" width="690" height="582" alt="Karte" usemap="#Landkarte">
  <map name="Landkarte">
    <area shape="rect" coords="11,10,80,46"
          href="http://www.koblenz.de/" alt="Koblenz" title="Koblenz">
    <area shape="rect" coords="97,77,175,116"
          href="http://www.wiesbaden.de/" alt="Wiesbaden" title="Wiesbaden">
    <area shape="rect" coords="112,119,176,152"
          href="http://www.mainz.de/" alt="Mainz" title="Mainz">
    <area shape="rect" coords="183,68,266,118"
          href="http://www.frankfurt.de/" alt="Frankfurt" title="Frankfurt">
    <area shape="rect" coords="106,229,208,270"
          href="http://www.mannheim.de/" alt="Mannheim" title="Mannheim">
    <area shape="rect" coords="180,271,270,308"
          href="http://www.heidelberg.de/" alt="Heidelberg" title="Heidelberg">
    <area shape="rect" coords="388,162,460,201"
          href="http://www.wuerzburg.de/" alt="Würzburg" title="Würzburg">
    <area shape="rect" coords="535,132,622,169"
          href="http://www.bamberg.de/" alt="Bamberg" title="Bamberg">
    <area shape="rect" coords="565,252,667,294"
          href="http://www.nuernberg.de/" alt="Nürnberg" title="Nürnberg">
    <area shape="rect" coords="97,366,207,406"
          href="http://www.karlsruhe.de/" alt="Karlsruhe" title="Karlsruhe">
    <area shape="rect" coords="269,331,350,374"
          href="http://www.heilbronn.de/" alt="Heilbronn" title="Heilbronn">
    <area shape="rect" coords="258,437,342,480"
          href="http://www.stuttgart.de/" alt="Stuttgart" title="Stuttgart">
    <area shape="rect" coords="402,527,464,569"
          href="http://www.ulm.de/" alt="Ulm" title="Ulm">
    <area shape="rect" coords="548,539,618,581"
          href="http://www.augsburg.de/" alt="Augsburg" title="Augsburg">
    <area shape="poly" coords="143,578,200,408,156,410,131,411,94,440,45,580"
          href="http://www.baden-aktuell.de/" alt="Baden" title="Baden">
  </map>

praktische Überlegungen

Wie erhalte ich die Pixelkoordinaten?

Die gewünschten Pixelkoordinaten für die jeweiligen verweissensitiven Flächen einer Grafik erhältst du nur indirekt. Du kannst beispielsweise ein Grafikprogramm benutzen, bei dem du mit der Maus in der angezeigten Grafik herumfährst und dabei die genauen Pixelkoordinaten des Mauszeigers angezeigt bekommst.

In komplexeren HTML-Editoren wie Adobe Dreamweaver kannst du sie durch Klicken und Ziehen im WYSIWYG-Editor erzeugen. Des Weiteren gibt es online-Tools. Gimp beinhaltet über das Image Map Plug-In einen geeigneten Editor.

Wie style ich die Imagemap?

Leider ist es in HTML nicht möglich, area-Elemente mit CSS so zu stylen, dass sie beim Überfahren mit der Maus oder Anklicken farblich gekennzeichnet werden. Im Live-Beispiel oben kann man es nur über den geänderten cursor des Verweises erkennen.

Empfehlung: Verwende eine responsive SVG-Grafik, in der du das Aussehen der verlinkten Flächen mit CSS festlegen können.

Weblinks

  1. thenewcode: Create A Responsive Imagemap With SVG von Dudley Storey
  2. creativebloq: Create responsive SVG image maps