Zum Inhalt springen

Hilfe:Imagemaps

Links hinzufügen
Aus Wikivoyage
Hilfe

Verweissensitive Grafiken (englisch: 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 im deutschsprachigen Wikivoyage installierten MediaWiki-Erweiterung „ImageMap“ 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 Dateibeschreibungsseite – abweichenden Link zuzuweisen, um weiterführende Informationen zu den dargestellten Details anzubieten. Typische Anwendungsfälle auf WIkivoyage sind anklickbare Karten.

Syntax

[Bearbeiten]

Der Inhalt zwischen den umschließenden Tags <imagemap>...</imagemap> kann dabei aus Leer-, Kommentar- (wird durch # eingeleitet) und logischen Zeilen bestehen.

<imagemap>
Datei:JV Snellman.jpg|100px|rechts
circle 200 160 15 [[Nase]]
default [[Johan Vilhelm Snellman]]
desc unten links
</imagemap>

Aufbau

[Bearbeiten]

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 einfügen, jedoch ohne die sonst übliche eckige Klammerung).

  • Die Bildattribute mini, thumb werden wie gewohnt als Vorschaubild interpretiert, Bildtitel oder beschreibende Alternativtexte können wie gewohnt in den Parametern eingefügt werden. Auch die Bildausrichtung über links, rechts, zentriert 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.
<imagemap>
Datei:JV Snellman.jpg|100px|rechts
circle 200 160 15 [[Nase]]
default [[Johan Vilhelm Snellman]]
desc unten links
</imagemap>

Parameter

[Bearbeiten]

Der Nullpunkt für die Koordinaten (Einheit: Pixel) der Linkflächen ist oben links.

  • poly: Vieleck. Die Parameter geben die Eckpunkte des Vielecks an, gefolgt von einem Wikilink zum Ziel. Wird poly verwendet, müssen diese Zeilen vor rect, circle kommen.
  • rect: Rechteck. Die Parameter beschreiben die Ecken links-oben und rechts-unten, gefolgt von einem Wikilink zum Ziel.
  • circle: Kreis. Die ersten Parameter geben den Mittelpunkt an, der dritte den Radius. Danach folgt wieder ein Wikilink zum Ziel.
  • default: Optionaler Parameter. Er bestimmt das Standard-Linkziel für die restlichen Flächen.
  • desc: 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 top-right, bottom-right, bottom-left, top-left, none. Der Standard ist bottom-right. Die Option desc none ist nur erlaubt, wenn das Bild gemeinfrei (PD) ist, ansonsten muss mit desc „Ecke nach Wahl“ die Möglichkeit gegeben sein, zur Dateibeschreibungsseite mit den Lizenzinformationen zu kommen. Neben den englischen Bezeichnungen sind auch unten rechts, unten links, oben rechts, oben links, keine erlaubt.

Link oder Text

[Bearbeiten]

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: [[<artikel>|Text]]
  • Text: [[#!|Text]]
    (Imagemap verlangt immer einen "Link" - #! ist ein Dummy-Platzhalter)

Beispiele

[Bearbeiten]

Grundlagen

[Bearbeiten]

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 mini/thumb bzw. verweis/link) erreicht werden (vgl. KISS-Prinzip).

Bei der Einbindung von Imagemaps mit dem Parameter „mini“ bzw. „thumb“ kann der Parameter desc weggelassen werden. Das auf der rechten Seite der Bildlegende vorhandene Vergrößerungssymbol hat dieselbe Wirkung.

<imagemap>
Datei:JV Snellman.jpg|100px|mini
default [[Johan Vilhelm Snellman]]
</imagemap>

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.
<imagemap>
Datei:JV Snellman.jpg|100px|rechts
circle 200 160 15 [[Nase]]
default [[Johan Vilhelm Snellman]]
desc unten links
</imagemap>
  • Dateibeschreibungslink: Um die Verlinkung zur Dateibeschreibungsseite zu ermöglichen wird bei rahmenloser Darstellung ein angefügt, das sich unterschiedlich positionieren lässt.
<imagemap>
Datei:JV Snellman.jpg|100px|rechts
circle 200 160 15 [[Nase]]
default [[Johan Vilhelm Snellman]]
desc unten links
</imagemap>

Umfangreichere Anwendung

[Bearbeiten]

Die folgende klickbare Weltkarte wurde als Imagemap definiert. Ein Klick in einen der farblich unterschiedenen Kontinente führt in den Wikipedia-Artikel über ihn.

Kontinente
Kontinente

Der Quelltext für diese Weltkarte sieht folgendermaßen aus (Kommentarzeilen als Beispiel hervorgehoben):

<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 sowie die Antarktis grob vereinfacht als Rechteck:
rect  1144 370  1407 581   [[Australien und Ozeanien]]
rect   257 658  1218 752   [[Antarktis]]
default [[Ozean]]
desc bottom-right
</imagemap>

Koordinaten bestimmen

[Bearbeiten]

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

ImageMapEdit

[Bearbeiten]

Mit dem Tool 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.

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

Öffne die Datei in Gimp. Wähle im Hauptmenü: Filter > Web > Imagemap. 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

[Bearbeiten]

Innerhalb von Vorlagen kann anstelle von <imagemap>…</imagemap> auch {{#tag:imagemap|…}} geschrieben werden, wobei senkrechte Striche durch {{!}} zu ersetzen sind. Damit wird die Auswertung von Parametern innerhalb der Imagemap ermöglicht. Ein Beispiel von Imagemaps in der Vorlage:Große Imagemap findet sich auf dieser Seite im Abschnitt „Panoramabilder“.

{{#tag:imagemap|
Datei:JV Snellman.jpg{{!}}100px{{!}}rechts
circle 200 160 15 [[Nase]]
default [[Johan Vilhelm Snellman]]
desc unten links
}}

Imagemaps in Quickbars

[Bearbeiten]

Anklickbare Karten gibt es in Regionenartikeln unter Verwendung der Vorlage {{Quickbar Region}}. Diese bestzt einen Parameter |Imagemap= über den der die Imagemap spezifiziert werden kann. Allerdings kann man nicht den Code, so wie er hier drüber erklärt wurde, in den Parameter einfügen. Das Modul Imagemap übernimmt diese Aufgabe. Es erwartet die Imagemap als eigenes Submodul. Typische Imagemaps für Länder und einige Regionen liegen bereits vor (Z. B. für Deutschland). Die Benennung orientiert sich dabei am entsprechenden ISO 3166-2-Code der Region. Hier ein Beispiel:

  • Imagemap als Modul Modul:Imagemap/de für Deutschland
  • Angabe der Imagemap in der Quickbar: |Imagemap=de. Es reicht hier, nur den Namen des Untermoduls anzugeben. Das Modul:Imagemap/ entfällt.

Folgendes ist dabei noch zu beachten

  • In der Quickbar muss auch eine passende Karte angegeben werden (Parameter |Lagekarte=)
  • Die vorhandenen Imagemap kooperieren mit den beliebten Standard-Positionskarten
  • Für spezielle Karten sind eigene Imagemaps zu erstellen und abzulegen, z. B. Modul:Imagemap/de <radwandern in Deutschland>. Der Start mit dem ISO-Code ist auch hier sinnvoll. Ähnliches gilt für SVG-Karten, die infolge ihrer Skalierbarkeit verschiedene Imagemaps benötigen. Die Karte für die Darstellung der Distrikte in der südafrikanischen Provinz Western Cape heißt daher Modul:Imagemap/za-wc (Quickbar).

Details zu den Modules gibt es im folgenden Abschnitt.

Imagemaps als Modul

[Bearbeiten]

Soll eine Imagemap in einem Modul abgelegt werden (z. B. für die Verwendung in einer Infobox), ist einiges zu beachten. Die Syntax, die im Tag verwendet wird, muss für die Verwendung als Modul etwas angepasst werden. Der Aufbau eines Moduls folgt dem hier gezeigten Schema:

imagemap  =  {
'poly 181 589 181 576 <mehr Koordinaten> [[Artikel 1]]',
--[[ ... noch mehr Objekte ]]
'poly 197 537 170 542 <mehr Koordinaten> [[Artikel 2]]',
'poly 425 590 393 570 <mehr Koordinaten> [[Artikel 3]]'
}

return imagemap

Gibt es Probleme (Fehlermeldungen oder nicht richtig anklickbare Bereiche), kann folgendes passiert sein:

  • Die Syntax passt nicht. Beachte: Nach jedem Eintrag (in Hochkommas eingeschlossen) folgt ein Komma - außer beim letzten Eintrag
  • Anzahl der Zahlen muss geradzahlig sein. Wurde beim Kopieren/Bearbeiten vielleicht eine Zahl versehentlich gelöscht?
  • Gibt es negative Zahlen (wie z. B. "-1")? Hier wirft die Erweiterung einen Fahler, manche Editoren geben solche Zahlen aber aus.
  • Passt die Dimension der Imagemap zur der im Modul verwendeten Datei?

Imagemaps und SVG

[Bearbeiten]

Siehe auch

[Bearbeiten]
Hilfeartikel
[Bearbeiten]
Vorlagen
[Bearbeiten]
  • {{Imagemap}} – Verwendung einer Imagemap, die als Modul abgelegt werden muss.
Mediawiki
[Bearbeiten]
Kategorien
[Bearbeiten]
Abgerufen von „https://de.wikivoyage.org/w/index.php?title=Hilfe:Imagemaps&oldid=1323725“