imported>Invisigoth67: typo, form

2024-12-23T14:25:57Z

typo, form

Neue Seite

<div style="float:right">
<imagemap>
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
</imagemap>
Beispiel „Kontinente“
</div>

'''Verweissensitive Grafik''' ({{enS|image map}}) ist ein Begriff aus dem [[Webdesign]] und bezieht sich auch auf [[Multimedia]]programme. Sie bietet eine Möglichkeit, [[Hyperlink]]s 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 [[Hypertext Markup Language|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 [[Landkarte]]n, in denen bestimmte Regionen zu den entsprechenden Seiten führen. Ein weiteres Beispiel sind Ende des Jahres oft „interaktive“ [[Adventskalender]].

== Definition in HTML ==
Eine in [[Hypertext Markup Language|HTML]] definierte Imagemap besteht aus einem eigentlichen Bild, das mit einem <code><img></code>-[[Tag (Informatik)|Tag]] definiert wird. Gleichzeitig wird bei diesem ein Attribut <code>usemap</code> angegeben, das auf die Imagemap verweist.

Die Imagemap besteht aus dem <code><map></code>-Tag sowie aus den einzelnen <code><area></code>-Tags, die die eigentlichen Definitionen der Felder darstellen, auf die geklickt werden kann. Diese definieren, vergleichbar mit der Definition bei einem <code><a></code>-Tag, welche [[Uniform Resource Locator|URL]] aufzurufen ist. Folgender Code gibt an, dass ein Bereich (''9,372,66,397''), der als [[rechteck]]iger Bereich definiert wird, zur Wikipedia-Seite zeigt:
<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

Grafische Hervorhebungen können mit [[Cascading Style Sheets|CSS]] oder [[JavaScript]] umgesetzt werden.

== Definition in Mediawiki ==
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.<ref>MediaWiki: [https://www.mediawiki.org/wiki/Extension:ImageMap Extension:ImageMap]</ref>

<syntaxhighlight lang="html">
<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>
</syntaxhighlight>

== Verweissensitive Grafiken in Videos ==
Auch in digitalen [[Videotechnik|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, [[Polygon]]e) 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 ===
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 ==
=== HTML 4.01 ===
* [https://www.w3.org/TR/html401/struct/objects.html#h-13.6 ''Image maps''], [[W3C]]-Empfehlung, 24. Dezember 1999 (englisch)

=== HTML 5 ===
* [https://www.w3.org/TR/html-markup/img.html#img.attrs.usemap ''usemap''] (Attribut von img), W3C Arbeitsentwurf, 25. Mai 2011 (englisch)
* [https://www.w3.org/TR/html-markup/img.html#img.attrs.ismap ''ismap''] (Attribut von img), W3C Arbeitsentwurf, 25. Mai 2011 (englisch)
* [https://www.w3.org/wiki/HTML/Elements/map ''map – image-map definition''], W3C Arbeitsentwurf, 10. Sep. 2017 (englisch)
* [https://www.w3.org/wiki/HTML/Elements/area ''area – image-map hyperlink''], W3C Arbeitsentwurf, 10. Sep. 2017 (englisch)

== Software ==
* [[Adobe Illustrator]]
* [[Adobe Dreamweaver]]
* [[Adobe Fireworks]]
* ''Online Image Map Editor'', Erstellung der Flächen für verweissensitive Grafiken<ref>[http://www.maschek.hu/imagemap/imgmap imagemap] maschek.hu</ref>
* [[GIMP]]: Filter → Web → Image Map, eingebauter Filter zur Erstellung und Anpassung von Imagemaps

== Weblinks ==
Tutorials:

* [https://wiki.selfhtml.org/wiki/HTML/Multimedia_und_Grafiken/verweissensitive_Grafiken ''Verweis-sensitive Grafiken''] im [[SELFHTML]]-Wiki
* [https://docs.gimp.org/de/plug-in-imagemap.html Kapitel ''ImageMap''] im Benutzerhandbuch von [[GIMP]]

Skripte:
* [http://www.netzgesta.de/mapper/ ''Mapper.js''] – automatische Hervorhebung von Imagemap-Regionen durch [[JavaScript]] bei netzgesta.de (englisch)
* [https://davidlynch.org/projects/maphilight/docs/ ''Maphighlight.js''] – jQuery Map Highlight, Umwandlung zu 2D Canvas-Element
* [http://www.netzgesta.de/mapzoom/ ''MapZoom.js''] – netzgesta.de
* [https://www.cs.rochester.edu/~gildea/Map/ ''mapzoom''] – Sammlung von [[Perl (Programmiersprache)|Perl-Skripten]] und [[Common Gateway Interface|CGI]]-Programmen für Imagemaps, enthält u. a. ''shp2imagemap.pl'' zur Umwandlung von [[Shapefile]]s in Imagemaps ([[University of Rochester]], englisch)

== Einzelnachweise ==
<references />

[[Kategorie:HTML]]
[[Kategorie:Computergrafik]]
[[Kategorie:GIS-Datenformat]]

Verweissensitive Grafik - Versionsgeschichte

imported>Invisigoth67: typo, form