Navigation


Verweissensitive Grafik

14.11.2011 @ 20:05, MystBot,



Datei:Continents vide couleurs.png|300px|Beispiel "Kontinente"
# Koordinaten nur ganz grob ermittelt für dieses Beispiel
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
poly 642 90 666 214 798 202 846 160 890 194 922 136 900 46 740 28 Europa
poly 680 218 620 300 644 358 798 550 916 472 916 322 876 316 838 230 744 210 680 214 Afrika
poly 916 32 888 148 888 186 812 186 876 312 1030 352 1138 416 1240 414 1298 82 954 22 Asien
# Australien und Antarktis grob vereinfacht als Rechteck:
rect 1144 370 1407 581 Australien
rect 257 658 1218 752 Antarktis
default Ozean
desc bottom-right

Beispiel "Kontinente"

Verweissensitive Grafik (engl. image map) ist ein Begriff aus dem Webdesign und bezieht sich auch auf Multimedia-Anwendungen. 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 Web-Seiten häufig anzutreffende Beispiele sind Landkarten, in denen bestimmte Regionen zu den entsprechenden Seiten führen. Ein weiteres Beispiel sind im Winter oft „interaktive“ Adventskalender.

Definition in HTML


Eine in HTML definierte Imagemap besteht aus einem eigentlichen Bild, das mit einem -Tag definiert wird. Gleichzeitig wird bei diesem ein Attribut usemap angegeben, das auf die Imagemap verweist.

Die Imagemap besteht aus dem -Tag sowie aus den einzelnen -Tags, die die eigentlichen Definitionen der Felder darstellen, auf die geklickt werden kann. Diese definieren, vergleichbar mit der Definition bei einem -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:

alternativtext



Grafische Hervorhebungen können mit CSS oder JavaScript umgesetzt werden.

Problematik in Spam-Mails


Imagemaps werden in sogenannten Spam-Mails häufig dazu missbraucht, dem Empfänger eine falsche Seite vorzutäuschen:

Dieser Code bewirkt, dass in der Statusleiste eines Mailreaders die URL der gespooften Bank erscheint (hier die Dresdner Bank), sich aber beim Klick auf einen Bildbereich die Seite des Spoofers (hier als XXX gekennzeichnet) öffnet.

Verweissensitive Grafiken in Videos


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 denen die Bereiche aktiv sind

Anwendungen sind beispielsweise aktiv vom Zuschauer einzublendende Zusatzinformationen oder Werbemitteilungen.

Quellen


HTML 4.01


* [http://www.w3.org/TR/html401/struct/objects.html#h-13.6 Image maps], W3C-Empfehlung, 24 Dezember 1999 (englisch)

HTML 5


* [http://www.w3.org/TR/html-markup/img.html#img.attrs.usemap usemap] (Attribut von img), W3C Arbeitsentwurf, 25 Mai 2011 (englisch)
* [http://www.w3.org/TR/html-markup/img.html#img.attrs.ismap ismap] (Attribut von img), W3C Arbeitsentwurf, 25 Mai 2011 (englisch)
* [http://www.w3.org/TR/html-markup/map.html map – image-map definition], W3C Arbeitsentwurf, 25 Mai 2011 (englisch)

* [http://www.w3.org/TR/html-markup/area.html area – image-map hyperlink], W3C Arbeitsentwurf, 25 Mai 2011 (englisch)

Weblinks


* Beispiel: [http://alarm.meteocentrale.ch/ Alle Warnungen für die Schweiz] auf der Website von Meteocentrale Schweiz

Tutorials


* SELFHTML: [http://de.selfhtml.org/html/grafiken/verweis_sensitive.htm Verweis-sensitive Grafiken definieren] (HTML 4.01)
* [http://designreviver.com/tutorials/css-image-map-techniques-and-tutorials/ CSS Image Map Techniques and Tutorials] auf Design Reviver (englisch)

* [http://docs.gimp.org/de/plug-in-imagemap.html Kapitel ImageMap] im Benutzerhandbuch von GIMP

Software


* [http://www.kolchose.org/simon/ajaximagemapcreator/ HTML-Image map Creator], WYSIWYG mit AJAX für Browser (englisch)
* [http://www.netzgesta.de/mapper/ Mapper.js], automatische Hervorhebung von Imagemap-Regionen durch JavaScript bei netzgesta.de (englisch)
* [http://www.netzgesta.de/mapzoom/ MapZoom.js], bei netzgesta.de

* [http://www.cs.rochester.edu/~gildea/Map/ mapzoom], eine 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)

Kategorie:HTML
Kategorie:Computergrafik

Kategorie:GIS-Datenformat

ar:مخطط صورة
Image map
eo:Klakebla mapo
es:Ayuda:ImageMap
it:Mappa immagine
nl:Image map
pl:Image map
pt:Image map
ru:Карта изображений

weiter

Text und Bilder dieses Beitrags stammen aus dem Artikel Verweissensitive Grafik der freien Enzyklopädie Wikipedia und stehen unter der GNU Free Documentation License. Die Liste der Autoren ist in der Wikipedia unter dieser Seite verfügbar, der Original-Artikel lässt sich hier bearbeiten.