imported>Uncopy: Ändere bei syntaxhighlight lang von "html" auf "tid" nach dem Vorbild in https://www.mediawiki.org/wiki/Extension:ImageMap

2024-12-14T13:00:02Z

Ändere bei syntaxhighlight lang von "html" auf "tid" nach dem Vorbild in https://www.mediawiki.org/wiki/Extension:ImageMap

Neue Seite

{{Hilfe}}
'''Verweissensitive Grafiken''' ({{enS|imagemap}}) sind Grafiken oder Bilddateien, in denen beim Überfahren mit der Maus eine Information angezeigt und eine zusätzliche Sprungmarke (Verweis) verlinkt werden kann.

Eine Imagemap kann mit der in der deutschsprachigen Wikipedia installierten [[MediaWiki]]-Erweiterung „[[mw:Extension:ImageMap|<span title="englische Bildbeschreibung der Erweiterung bei mediawiki.org">ImageMap</span>]]“ als [[verweissensitive Grafik]] (multipel klickbares Bild) erstellt werden. Die Idee hinter diesem Konzept ist es, den Flächen innerhalb einer Grafik einen vom üblichen Linkziel – der [[Hilfe:Dateien|Dateibeschreibungsseite]] – abweichenden [[Hyperlink|Link]] zuzuweisen, um weiterführende Informationen zu den dargestellten Details anzubieten.

== Syntax ==
{{Hilfe/Wikitext-tag |tag=imagemap |class=float-right |binary=1 |Attribute=-}}

Der Inhalt zwischen den umschließenden [[H:Tags|Tags]] <code><imagemap>…</imagemap></code> kann dabei aus Leer-, Kommentar- (wird durch <code>#</code> eingeleitet) und logischen Zeilen bestehen.
<syntaxhighlight lang="tid" highlight="1,6" style="display:table">
<imagemap>
Datei:JV Snellman.jpg|100px|rechts
circle 200 160 15 [[Nase]]
default [[Johan Vilhelm Snellman]]
desc unten links
</imagemap>
</syntaxhighlight>

=== Aufbau ===
Die erste „logische Zeile“ ist ein Dateipfad mit dem Namen des anzuzeigenden Bildes und den zugehörigen Bildparametern gemäß dem Format der MediaWiki-Bildverknüpfung (siehe [[Hilfe:Bilder #Einbindung]], jedoch ohne die sonst übliche eckige Klammerung).
* Die Bildattribute <code>mini, thumb</code> werden wie gewohnt als [[Hilfe:Bilder#Vorschaubilder (Miniatur)|Vorschaubild]] interpretiert, Bildtitel oder beschreibende Alternativtexte können wie gewohnt in den Parametern eingefügt werden. Auch die Bildausrichtung über <code>links, rechts, zentriert</code> oder die Größenänderung sind möglich.
* Anders als bei einer normalen Bilddarstellung erfolgt jedoch keine Hinterlegung der Grafik mit einem [[Tooltip]], das dem Bildtitel entspricht, Tooptips werden in den weiteren logischen Parametern für die jeweiligen Bereiche der Grafik durch die Beschreibungstexte der Linkziele erzeugt.
<syntaxhighlight lang="tid" highlight="2" style="display:table">
<imagemap>
Datei:JV Snellman.jpg|100px|rechts
circle 200 160 15 [[Nase]]
default [[Johan Vilhelm Snellman]]
desc unten links
</imagemap>
</syntaxhighlight>

=== Parameter ===
Der Nullpunkt für die Koordinaten (Einheit: [[Pixel]]) der Linkflächen ist oben links. Die Koordinaten beziehen sich auf die Originalgröße des Bildes, sie werden automatisch in die als Bildparameter angegebene Größe umgerechnet.
* <code>poly</code>: Vieleck. Die Parameter geben in Koordinatenpaaren die Eckpunkte des Vielecks an, gefolgt von einem Wikilink zum Ziel. Wird <code>poly</code> verwendet, müssen diese Zeilen vor <code>rect</code>, <code>circle</code> kommen.
* <code>rect</code>: Rechteck. Die Parameter beschreiben die Ecken links-oben und rechts-unten, gefolgt von einem Wikilink zum Ziel.
* <code>circle</code>: Kreis. Die ersten beiden Parameter geben den Mittelpunkt an, der dritte den Radius. Danach folgt wieder ein Wikilink zum Ziel.
* <code>default</code>: Optionaler Parameter. Er bestimmt das Standard-Linkziel für die restlichen Flächen.
* {{Anker|desc}} <code>desc</code>: Gibt die Ecke vor, in der das klickbare Symbol (ein „i“ im blauen Kreis), das zu Dateibeschreibungsseite führt, erscheinen soll. Mögliche Parameter sind <code style="white-space:nowrap">top-right</code>, <code style="white-space:nowrap">bottom-right</code>, <code style="white-space:nowrap">bottom-left</code>, <code style="white-space:nowrap">top-left</code>, <code>none</code>. Der Standard ist <code style="white-space:nowrap">bottom-right</code>. Die Option <code style="white-space:nowrap">desc none</code> ist nur erlaubt, wenn das Bild gemeinfrei (PD) ist, ansonsten '''muss''' mit <code style="white-space:nowrap">desc „Ecke nach Wahl“</code> die Möglichkeit gegeben sein, zur Dateibeschreibungsseite mit den Lizenzinformationen zu kommen. Neben den englischen Bezeichnungen sind auch <code style="white-space:nowrap">unten rechts</code>, <code style="white-space:nowrap">unten links</code>, <code style="white-space:nowrap">oben rechts</code>, <code style="white-space:nowrap">oben links</code>, <code>keine</code> erlaubt.

=== Link oder Text ===
Jeder sensitiven Fläche (Rechteck, Polygon, Kreis) kann man einen Link oder Text anfügen, der dann beim Überfahren mit dem Mauszeiger angezeigt wird:
* Link: <code>[[<artikel>|Text]]</code>
* Text: <code><nowiki>[[#!|Text]]</nowiki></code> <br> (Imagemap verlangt immer einen "Link" - <code>#!</code> ist ein Dummy-Platzhalter)

== Beispiele ==

=== Grundlagen ===
Das erste Beispiel dient der Illustration der Funktionsweise von Imagemaps und sollte nicht in Artikeln verwendet werden. Denn eine vergleichbare Funktionalität kann mit einfacheren Mitteln (normale Bildeinbindung in Verbindung mit den Parametern [[#Miniatur|<code>mini</code>/<code>thumb</code>]] bzw. <code>verweis</code>/<code>link</code>) erreicht werden (vgl. [[KISS-Prinzip]]).

Bei der Einbindung von Imagemaps mit dem Parameter [[Hilfe:Bilder#Miniatur|„mini“ bzw. „thumb“]] kann der Parameter <code>[[#desc|desc]]</code> weggelassen werden. Das auf der rechten Seite der Bildlegende vorhandene Vergrößerungssymbol [[Datei:Magnify-clip (sans arrow).svg|20px]] hat die gleiche Wirkung.
<div class="float-right">
<imagemap>
Datei:JV Snellman.jpg|100px|mini
default [[Johan Vilhelm Snellman]]
</imagemap>
</div>
<syntaxhighlight lang="tid" highlight="2" style="display:table">
<imagemap>
Datei:JV Snellman.jpg|100px|mini
default [[Johan Vilhelm Snellman]]
</imagemap>
</syntaxhighlight>

Parameterzuweisungen werden durch Leerzeichen voneinander getrennt. Jede Zeile enthält dabei die Werte für eine Position, oder ein Bilddetail.
* Die Positionierung wird auf Grundlage der Originalgröße der Datei ermittelt und für die später gewünschte angezeigte Bildgröße automatisch berechnet. Die Werte geben den jeweiligen Abstand vom linken (horizontale Pixelzahl) und vom oberen Rand (vertikale Pixelzahl) an.
* Um die benötigten Parameter zu bestimmen, kann man die Datei in Originalgröße in einem Grafikprogramm (z. B. [[Gimp]]) öffnen, um mit der Maus den entsprechenden Punkt auszuwählen und seine Koordinaten aus der Statusleiste abzulesen.
<div class="float-right">
<imagemap>
Datei:JV Snellman.jpg|100px|rechts
circle 200 160 15 [[Nase]]
default [[Johan Vilhelm Snellman]]
desc unten links
</imagemap>
</div>
<div style="padding-left:{{WikiLayout|indent}};">
<syntaxhighlight lang="tid" highlight="3" style="display:table;">
<imagemap>
Datei:JV Snellman.jpg|100px|rechts
circle 200 160 15 [[Nase]]
default [[Johan Vilhelm Snellman]]
desc unten links
</imagemap>
</syntaxhighlight>
</div>
* Dateibeschreibungslink: Um die Verlinkung zur Dateibeschreibungsseite zu ermöglichen, wird bei rahmenloser Darstellung ein [[Datei:Desc-20.png|20px]] angefügt, das sich mit <code>desc</code> unterschiedlich positionieren lässt.

<div style="padding-left:{{WikiLayout|indent}};">
<syntaxhighlight lang="tid" highlight="5" style="display:table;">
<imagemap>
Datei:JV Snellman.jpg|100px|rechts
circle 200 160 15 [[Nase]]
default [[Johan Vilhelm Snellman]]
desc unten links
</imagemap>
</syntaxhighlight>
</div>

=== Umfangreichere Anwendung ===
Die folgende klickbare Weltkarte wurde als Imagemap definiert. Ein Klick in einen der farblich unterschiedenen Kontinente führt in den Wikipedia-Artikel über ihn.
<imagemap>
Datei:Continents vide couleurs.png|300px|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 Ozeanien grob vereinfacht als Rechteck:
rect 1144 370 1407 581 [[Australien und Ozeanien]]
# Antarktis als Kreis:
# (angepasst an Version vom 15:43, 26. Okt. 2024
# https://upload.wikimedia.org/wikipedia/commons/1/19/Continents_vide_couleurs.png)
circle 145 550 150 [[Antarktis]]
default [[Ozean]]
desc bottom-right
</imagemap>

Der Quelltext für diese Weltkarte sieht folgendermaßen aus (Kommentarzeilen als Beispiel hervorgehoben):
<syntaxhighlight lang="tid" highlight="3,9,11,12,13">
<imagemap>
Datei:Continents vide couleurs.png|300px|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 Ozeanien grob vereinfacht als Rechteck:
rect 1144 370 1407 581 [[Australien und Ozeanien]]
# Antarktis als Kreis:
# (angepasst an Version vom 15:43, 26. Okt. 2024
# https://upload.wikimedia.org/wikipedia/commons/1/19/Continents_vide_couleurs.png)
circle 145 550 150 [[Antarktis]]
default [[Ozean]]
desc bottom-right
</imagemap>
</syntaxhighlight>

== Koordinaten bestimmen ==
Es gibt zwei Möglichkeiten, die Koordinaten zu finden, welche die Maus-sensitiven Flächen in einer Imagemap beschreiben (<code>rect</code> = Rechteck, <code>poly</code> = Vieleck, <code>circle</code> = Kreis):

=== ImageMapEdit ===
Mit dem Tool [[meta:User:Dapete/ImageMapEdit#Deutsch|ImageMapEdit]] kann man die Flächen ganz einfach zeichnen. Die Koordinaten werden unmittelbar in Wikicode ausgegeben und können durch Kopieren in den Artikel eingefügt werden. Über ein Eingabefeld kann man auch vorhandenen Wikicode importieren, visuell anzeigen und visuell ändern/ergänzen und das Ergebnis wieder kopieren.

=== Gimp ===
Das Grafikprogramm [[Gimp]] enthält ein Imagemap-Werkzeug. Gespeichert wird die Imagemap im HTML-Format.

Öffne die Datei in Gimp. Wähle im Hauptmenü: <code>Filter > Web > Imagemap</code>. Gimp öffnet ein neues Fenster "Imagemap". Im Menü links gibt es drei Icons für die Werkzeuge Rechteck, Kreis und Polygon. Zeichne mit dem Werkzeug den Umriss der gewünschten Fläche. Dabei öffnet sich ein Beschreibungsfenster für die gezeichnete Fläche.

== Imagemaps in Vorlagen ==

Innerhalb von [[Hilfe:Vorlagen|Vorlagen]] kann anstelle von <code><imagemap>…</imagemap></code> auch mit der Parserfunktion <code>[[Hilfe:Parserfunktionen/Programmierung#tag|<nowiki>{{#tag:imagemap|…}}</nowiki>]]</code> geschrieben werden, wobei senkrechte Striche durch <code><nowiki>{{!}}</nowiki></code> zu ersetzen sind. Damit wird die Auswertung von [[Hilfe:Vorlagen#Parameter einfügen und verwenden|Parametern]] innerhalb der Imagemap ermöglicht. Ein Beispiel von Imagemaps in der [[Vorlage:Große Imagemap]] findet sich auf dieser Seite im Abschnitt „[[#Panoramabilder|Panoramabilder]]“.
<syntaxhighlight lang="tid" highlight="1,2,6" style="display:table">
{{#tag:imagemap|
Datei:JV Snellman.jpg{{!}}100px{{!}}rechts
circle 200 160 15 [[Nase]]
default [[Johan Vilhelm Snellman]]
desc unten links
}}
</syntaxhighlight>

== Weitere Informationen ==
* [[Vorlage:Große Imagemap]]
* [[Hilfe:Bilder]] – Bildeinbindung allgemein
* [[Hilfe:Galerie]] – Einbindung von Galerien
* [[mw:Extension:ImageMap|Extension:ImageMap]] Beschreibung der Funktion bei MediaWiki (englisch)
* Fortgeschrittene Benutzer können eine [[Hilfe:Skin|Skin-Erweiterung]] namens [[meta:User:Dapete/ImageMapEdit#Deutsch|ImageMapEdit]] von [[Benutzer:Dapete|Dapete]] nutzen.
* Für Fragen zum Aktivieren der Erweiterung bietet sich die Seite [[Wikipedia:Technik/Werkstatt]] an.
* [[:Kategorie:Vorlage:Verweissensitive Grafik]] – Übersicht über vorhandene Imagemaps
<noinclude>
[[Kategorie:Hilfe:Bilder]]
[[Kategorie:Hilfe:MediaWiki-Erweiterung‎]]
</noinclude>

Hilfe:Imagemap - Versionsgeschichte

imported>Uncopy: Ändere bei syntaxhighlight lang von "html" auf "tid" nach dem Vorbild in https://www.mediawiki.org/wiki/Extension:ImageMap