Verweissensitive Grafik (englisch image map) ist ein Begriff aus dem Webdesign und bezieht sich auch auf Multimediaprogramme. Sie bietet eine Möglichkeit, Hyperlinks innerhalb einer Grafik einzubetten. Diese werden mit der Variable shape= als rechteckige (rect), runde (circle) oder freie (poly) Schaltflächen realisiert, die sich wie Verweise (Anchor-Links) im Hypertext eines HTML-Dokumentes verhalten. In der Regel deutet ein sich verändernder Mauszeiger auf die nicht sichtbaren Schaltflächen hin. Verweissensitive Grafiken werden sowohl in Bild- als auch in Videodateien eingesetzt.
Auf Webseiten häufig anzutreffende Beispiele sind Landkarten, in denen bestimmte Regionen zu den entsprechenden Seiten führen. Ein weiteres Beispiel sind Ende des Jahres oft „interaktive“ Adventskalender.
Definition in HTML Bearbeiten
Eine in HTML definierte Imagemap besteht aus einem eigentlichen Bild, das mit einem <img>-Tag definiert wird. Gleichzeitig wird bei diesem ein Attribut usemap angegeben, das auf die Imagemap verweist.
Die Imagemap besteht aus dem <map>-Tag sowie aus den einzelnen <area>-Tags, die die eigentlichen Definitionen der Felder darstellen, auf die geklickt werden kann. Diese definieren, vergleichbar mit der Definition bei einem <a>-Tag, welche URL aufzurufen ist. Folgender Code gibt an, dass ein Bereich (9,372,66,397), der als rechteckiger Bereich definiert wird, zur Wikipedia-Seite zeigt:
<img src="bild.jpg" alt="alternativtext" usemap="#mapname" /> <map name="mapname"> <area shape="rect" coords="9,372,66,397" href="http://de.wikipedia.org/" alt="Wikipedia" title="Wikipedia" /> </map> Grafische Hervorhebungen können mit CSS oder JavaScript umgesetzt werden.
Definition in Mediawiki Bearbeiten
In der verbreiteten Wiki-Software Mediawiki gibt es eine Erweiterung „Extension:ImageMap“, mit der Imagemaps dargestellt, und ein Werkzeug, mit dem Imagemaps erstellt werden können.
<imagemap> Datei:Continents vide couleurs.png|300px|Beispiel „Kontinente“ poly 156 126 274 288 362 340 432 290 676 34 326 26 210 66 [[Nordamerika]] poly 400 318 366 334 366 388 460 632 490 630 556 400 418 306 [[Südamerika]] ... </imagemap> Verweissensitive Grafiken in Videos Bearbeiten
Auch in digitalen Videodateien können verweissensitive Grafiken angewandt werden. Dabei muss der Produzent (oder Hersteller) des Videos eine Map-Datei (als reine Textdatei) schreiben, die alle notwendigen Informationen enthält, wie
- Art, Anzahl und Aussehen (Rechtecke, Kreise, Polygone) der anklickbaren verweissensitiven Bereiche
- Zeitintervalle, während derer die Bereiche aktiv sind
Anwendungen sind beispielsweise aktiv vom Zuschauer einzublendende Zusatzinformationen oder Werbemitteilungen.
Pseudo-Verweissensitivität in Videos Bearbeiten
Um einen Effekt von Verweissensitivität hervorzurufen greifen viele Videomacher auf Videoportalen zu Tricks zurück, die ein ähnliches Resultat wie eine echte verweissensitive Grafik kreiert. Beispielsweise wird auf Youtube eine Anmerkung in bereits zuvor gefertigte Bereiche des Videos eingebettet, was diesen Bereich innerhalb des Videos "klickbar" macht.
Standards Bearbeiten
HTML 4.01 Bearbeiten
- Image maps, W3C-Empfehlung, 24. Dezember 1999 (englisch)
HTML 5 Bearbeiten
- usemap (Attribut von img), W3C Arbeitsentwurf, 25. Mai 2011 (englisch)
- ismap (Attribut von img), W3C Arbeitsentwurf, 25. Mai 2011 (englisch)
- map – image-map definition, W3C Arbeitsentwurf, 10. Sep. 2017 (englisch)
- area – image-map hyperlink, W3C Arbeitsentwurf, 10. Sep. 2017 (englisch)
Software Bearbeiten
- Adobe Illustrator
- Adobe Dreamweaver
- Adobe Fireworks
- Online Image Map Editor, Erstellung der Flächen für verweissensitive Grafiken
- GIMP: Filter → Web → Image Map, eingebauter Filter zur Erstellung und Anpassung von Imagemaps
Weblinks Bearbeiten
Tutorials:
- Verweis-sensitive Grafiken im SELFHTML-Wiki
- Kapitel ImageMap im Benutzerhandbuch von GIMP
Skripte:
- Mapper.js – automatische Hervorhebung von Imagemap-Regionen durch JavaScript bei netzgesta.de (englisch)
- Maphighlight.js – jQuery Map Highlight, Umwandlung zu 2D Canvas-Element
- MapZoom.js – netzgesta.de
- mapzoom – Sammlung von Perl-Skripten und CGI-Programmen für Imagemaps, enthält u. a. shp2imagemap.pl zur Umwandlung von Shapefiles in Imagemaps (University of Rochester, englisch)
Einzelnachweise Bearbeiten
- MediaWiki: Extension:ImageMap
- imagemap maschek.hu