SVG/Tutorials/responsive Imagemaps
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.
Inhaltsverzeichnis
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.
<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
<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.
/> geschlossen.Gestaltung durch CSS
<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
<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
(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
(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
(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
(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 
 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!
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.
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.
<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
- Ein Viereck (
- 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.
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 Attribut accesskey. Dies funktioniert genau wie bei Tastaturkürzeln als Verweise und wird dort näher beschrieben.
Der Begriff shape ist mehrdeutig.Für weitere Bedeutungen von shape (englisch für Form) siehe auch
- die CSS-Eigenschaft shape, die das Umfließen von unregelmäßigen Formen erlaubt
<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.
Weblinks
- ↑ thenewcode: Create A Responsive Imagemap With SVG von Dudley Storey
- ↑ creativebloq: Create responsive SVG image maps
