Jump to content

Erweiterung:ImageMap

Issue-Tracker: #ImageMap
From mediawiki.org
This page is a translated version of the page Extension:ImageMap and the translation is 98% complete.
Outdated translations are marked like this.
Languages:
Diese Erweiterung ist in MediaWiki 1.21 und darüber enthalten. Daher muss sie nicht erneut heruntergeladen werden. Allerdings müssen die folgenden Anweisungen trotzdem beachtet werden.
MediaWiki-Erweiterungen
ImageMap
Freigabestatus: stabil
Einbindung Tag
Beschreibung Ermöglicht anklickbare verweissensitive Grafiken in HTML
Autor(en) Tim StarlingDiskussion
Letzte Version Laufende Aktualisierungen
MediaWiki 1.23+
PHP 5.4+
Composer mediawiki/image-map
Lizenz GNU General Public License 2.0 oder neuer
Herunterladen
Erweiterung herunterladen
Git [?]:

log
Beispiel Children's encyclopedia
Verwendete Hooks
Quarterly downloads 79 (Ranked 61st)
Public wikis using 10,714 (Ranked 16th)
Übersetze die ImageMap-Erweiterung, wenn sie auf translatewiki.net verfügbar ist
Probleme Offene Aufgaben · Einen Fehler melden

Die "ImageMap"-Erweiterung ermöglicht anklickbare verweissensitive Grafiken (englisch image maps). Eine verweissensitive Grafik besitzt eine Liste von Koordinaten, die verschiedene Bereiche des Bildes mit verschiedenen Zielen verlinkt (im Gegensatz zu einer normalen Bildverknüpfung, bei der der gesamte Bereich des Bildes auf einzigen Ziel verknüpft ist). Beispielsweise kann auf einer Weltkarte jedes Land mit weiteren Informationen über dieses Land verlinkt sein. Die Absicht einer Bildkarte ist es, eine einfache Möglichkeit zu bieten, verschiedene Teile eines Bildes zu verlinken, ohne das Bild in separate Bilddateien zu unterteilen.

Beispiele

Einfaches Beispiel ohne Bildunterschrift

<imagemap>
File:Example2.png|150px|alt=Alternativer Text
default [[Main Page|Gehe auf die Hauptseite]]
</imagemap>
Alternativer Text

Das obige Beispiel verlinkt immer auf die Main Page, unabhängig davon, wo du es anklickst. Um mehr über das Bild herauszufinden, klicke auf das "i"-Symbol . Alternativ kann man so ein verlinktes Bild auch ohne die Erweiterung wie folgt erzeugen: [[File:Example2.png|150px|alt=Alternativer Text|title=Gehe auf die Hauptseite|link=Main Page]]

Komplexes Beispiel mit Bildunterschrift

Dieses Beispiel wird ein Vorschaubild mit der Größe (Breite × Höhe) 500 × 250 Pixel erzeugen; Das Originalbild hat eine Größe von 9.600 × 4.800 Pixeln. Die Koordinaten jeder Ecke sind in Pixeln angegeben und stellen einen Punkt im Originalbild dar. Die Eckpunkte des Polygons um "Judas" (im Bild der zweite von rechts) haben zum Beispiel horizontale Koordinaten (gemessen in Pixeln von der linken Seite) zwischen 7904 – 8635 und vertikale Koordinaten (gemessen in Pixeln von oben) zwischen 2096 – 3260, womit sie weit außerhalb des Bereichs des Vorschaubildes in der Größe 500 × 250, aber innerhalb des Bereichs des Originalbildes von 9.600 × 4.800 liegen. Beachte, dass eine Ecke des Polygons um "Simon" (ganz rechts im Bild), und zwar die Ecke mit den Koordinaten 9625 3301, außerhalb der Grenzen des Originalbildes 9,600 × 4,800 liegt. 

<imagemap>
File:The Last Supper - Leonardo Da Vinci - High Resolution 32x16.jpg|thumb|center|500px|alt=''Das Abendmahl'' von Leonardo da Vinci - Anklickbares Bild|Beispiel für eine verweissensitive Grafik. Durch das Anklicken einer Person auf dem Bild lädt der Browser den entsprechenden Artikel.

poly 550 2550 750 2400 1150 2300 1150 2150 1200 2075 1500 2125 1525 2300 1350 2800 1450 3000 1700 3300 1300 3475 650 3500 550 3300 450 3000 [[w:Bartholomew the Apostle|Bartholomew]] 
poly 1575 2300 1625 2150 1900 2150 1925 2500 1875 2600 1800 2750 1600 3250 1425 3100 1400 2800 1375 2600 [[w:James, son of Alphaeus|James Minor]]
poly 1960 2150 2200 2150 2350 2500 2450 2575 2375 2725 2375 2900 2225 3100 2225 3225 1600 3225 1825 2700 1975 2450 1925 2300 [[w:Saint Andrew|Andrew]]
poly 2450 2575 2775 2500 2700 2650 2800 2700 2600 3000 2600 3250 2300 3250 2200 3200 2300 3000 [[w:Saint Peter|Peter]]
poly 2750 2500 2950 2400 3125 2600 3175 2700 3300 2850 3700 3200 3750 3200 3650 3350 3400 3200 3000 3350 2600 3325 2750 2800 2900 2700 2700 2650 [[w:Judas Iscariot|Judas]]
poly 3000 2350 3300 2350 3350 2660 3560 2600 3565 2690 3250 2800 3125 2575 [[w:Saint Peter|Peter]]                                     
poly 3332 2338 3528 2240 4284 3024 4074 3332 3864 3290 3780 3150 3668 3192 3598 3024 3374 2870 3388 2772 3542 2800 3668 2702 3542 2590 3430 2604 3350 2600 3300 2500[[w:John the Apostle|John]]
poly 4775 2184 4915 2128 5055 2212 5083 2352 5111 2464 5181 2604 5307 2744 5573 3052 5615 3192 5657 3290 5573 3402 5461 3332 5335 3248 4495 3248 4439 3388 4243 3388 4075 3360 4173 3136 4327 3010 4509 2730 4663 2520 4733 2394 [[w:Jesus]]
poly 5900 2100 5900 2150 5800 2400 5800 2500 5675 2589 5480 2671 5438 2507 5425 2301 5589 2452 5630 2301 5650 2100 [[w:Thomas the Apostle|Thomas]]
poly 5918 2150 6041 2109 6137 2246 6192 2411 6110 2589 6110 2726 6192 2822 6302 2740 6589 3109 5658 3178 5575 2918 5300 2698 5233 2589 5274 2438 5370 2507 5521 2685 5617 2671 5712 2575 5822 2507 5808 2287 5822 2175 [[w:James, son of Zebedee|James Greater]]
poly 6137 2013 6439 2013 6863 2260 7110 2515 6726 2675 6507 2548 6425 2630 6356 2753 6548 2849 6699 2781 7082 2794 7178 3109 6699 3178 6548 2986 6397 2835 6165 2775 6110 2589 6233 2438 6302 2383 6151 2287 6096 2164 [[w:Philip the Apostle|Philip]]
poly 7635 2123 7800 2013 8000 2055 8025 2287 7950 2438 8000 2698 8055 2918 7959 3164 7233 3164 7124 2972 7124 2794 6548 2794 6384 2781 6384 2671 6493 2575 6750 2650 7075 2550 7219 2400 7625 2300 [[w:Matthew the Apostle|Matthew]]
poly 8325 2096 8600 2109 8635 2493 8615 2726 8439 2781 8274 2740 8125 2835 8151 2931 8400 2975 8411 3068 8589 3041 8617 3205 7987 3260 8124 3027 7987 2644 7904 2493 7959 2425 8096 2356 [[w:Judas Thaddaeus|Jude]]
poly 8800 2150 8900 2125 9055 2150 9125 2397 9400 2475 9550 2931 9625 3301 9151 3397 8535 3219 8726 3014 8466 3068 8411 2918 8178 2931 8124 2835 8329 2753 8535 2794 8726 2603 8725 2342 [[w:Simon the Zealot|Simon]]
</imagemap>
Das Abendmahl von Leonardo da Vinci - Anklickbares BildBartholomewJames MinorAndrewPeterJudasPeterJohnw:JesusThomasJames GreaterPhilipMatthewJudeSimon
Beispiel für eine verweissensitive Grafik. Durch das Anklicken einer Person auf dem Bild lädt der Browser den entsprechenden Artikel.

Das obige Beispiel verlinkt auf viele unterschiedliche Seiten, abhängig davon, wohin man klickt. Um mehr über das Bild herauszufinden, klicke auf das Symbol mit dem doppelten Rechteck.

Syntax-Beschreibung

Die Inhalte einer ‎<imagemap>-Markierung bestehen aus leeren Zeilen, Kommentaren (die mit # beginnen) und logischen Zeilen.

Die erste logische Zeile gibt an, welches Bild angezeigt werden soll. Es muss im gleichen Format angegeben werden, wie in einem normalen MediaWiki-Bildlink (siehe Bilderhilfe), jedoch ohne die umschließenden Markierungen [[ und ]].

De erste Zeile spezifiziert ein "thumb"- oder "frame"-Bild, dann werden die Beschreibung der ersten Zeile und alle |alt=-Parameter wie gewöhnlich als Beschreibung des Bildes und alternativer Text behandelt. Andernfalls gibt der Parameter |alt= (oder wenn dieser fehlt irgendeine Beschreibung) den alternativen Text des Bildes vor.

In keinem Fall hat das Bild selbst einen Titel-Text (häufig für Tooltips verwendet); der Titel-Text wird aus den Regionen entnommen, die in den folgenden Zeilen beschrieben werden.

Weitere Zeilen werden in Zeichen aufgeteilt und durch Leerzeichen voneinander getrennt. Die Funktion jeder Zeile wird durch das erste Zeichen der Zeile bestimmt.

Eine Koordinate besteht aus zwei Zeichen. Das erste Zeichen ist die horizontale (X) Position und das zweite Zeichen ist die vertikale (Y) Position. Alle Koordinaten beziehen sich auf das Bild in voller Größe, nicht auf das sichtbare Bild. Die X- und Y-Zeichen sollten als Entfernung von der linken Seite (Anzahl horizontaler Pixel) und von oben (Anzahl vertikaler Pixel) für das Bild in voller Größe angegeben werden.

desc
Bestimmt den Ort des blauen "i"-Zeichens , welcher auf die Bildbeschreibung verlinkt. Mögliche Werte: top-right, bottom-right (Standard), bottom-left, top-left, none. Dieser Parameter wird bei "thumb"- oder "frame"-Bildern ignoriert, da bei diesen stattdessen das übliche Symbol des doppelten Rechtecks genutzt wird.
poly
Ein Polygon. Die Koordinaten der Ecken sind gegeben, gefolgt von einem Link in eckigen Klammern.
rect
Ein Rechteck. Die Parameter sind die Koordinaten der oberen linken und unteren rechten Ecken, gefolgt von einem Linkziel in eckigen Klammern.
Beispiel
<imagemap>
File:PolierMartinWombwellZoffany.jpg|thumb|200px|Colonel Antoine Polier
rect 269 140 344 305 [[Claude Martin]]
rect 124 147 181 298 [[Antoine Polier|Antoine-Louis Polier]]
desc none
</imagemap>
circle
Ein Kreis. Die ersten beiden Parameter sind die Koordinaten des Mittelpunktes, der dritte ist der Radius. Auf die Koordinaten folgt ein Link in eckigen Klammern.
default
Es wird der Standardlink ausgegeben, wo keine anderen Regionen spezifiziert sind.

Alle Koordinaten werden im Verhältnis zum originalen Bild angegeben. Das Bild kann mithilfe der Syntax für Vorschaubilder skaliert werden, wobei die Koordinaten für die verweissensitive Grafik automatisch entsprechend skaliert werden.

Alle Links haben entweder das Format [[Seitentitel]] oder [[Seitentitel|Beschreibung]]. Im letzteren Fall wird der Teil nach dem Trennstrich "|" das Titel-Attribut des Links — bei den meisten Browsern wird es als Tooltip erscheinen, wenn der Benutzer über dieses fährt; der Teil nach dem Trennstrich wird auch der alternative Text für den Link. Wenn keine explizite Linkbeschreibung angegeben ist, wird der Seitentitel genutzt.

In Bereichen, in denen es Überschneidungen gibt, wird der als erstes aufgeführte Link bevorzugt.

Installation

Diese Erweiterung ist Teil eines Paketes mit MediaWiki ab 1.21 und darüber. Daher muss sie nicht erneut heruntergeladen werden.

Stelle sicher, dass das Hochladen aktiviert und ImageMagick installiert ist: 

$wgEnableUploads = true;
$wgUseImageMagick = true;
$wgImageMagickConvertCommand = "/usr/bin/convert";
  • Die Erweiterung herunterladen und die Datei(en) in ein Verzeichnis namens ImageMap im Ordner extensions/ ablegen.
    Entwickler und Code-Beitragende sollten stattdessen die Erweiterung von Git installieren, mit:cd extensions/
    git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/ImageMap
  • Folgenden Code am Ende deiner LocalSettings.php -Datei einfügen: 
    wfLoadExtension( 'ImageMap' );
  • Yes Erledigt – Navigiere zu Special:Version in deinem Wiki, um zu überprüfen, ob die Erweiterung erfolgreich installiert wurde.
Fehlerbehebung
  1. Überprüfe, ob dein php-DOM aktiviert ist. Wenn es das nicht ist, musst du es möglicherweise installieren.
  2. Überprüfe, ob ImageMagick installiert ist, da sich die Erweiterung zur Größenveränderung auf /usr/bin/convert verlässt. Wenn sie nicht vorhanden ist, erhältst du möglicherweise eine Seite nur mit XML-Fehlern (Tipp: Nutze die Zurück-Schaltfläche im Browser, da du weiterhin die Seite bearbeiten kannst).
  3. Bei gemeinsamem OHV-Hosting von $wgUseImageMagick sollte dies wie folgt aussehen: $wgUseImageMagick=false;

Composer

Du kannst diese Erweiterung auch mit integrierter Composer -Unterstütung installieren. 

composer require mediawiki/image-map @dev
Die Nutzung eines Composers zur Installation dieser Erweiterung wird immer die Installation der letzten entwickelten Version dieser Erweiterung bewirken, wenn du den Befehl "composer update --no-dev" ausführst

Nutzung mit Vorlagen, magischen Wörtern oder Parser-Funktionen

Wenn du möchtest, dass diese Erweiterung (wie die meisten Tag-Erweiterungen) Vorlagenparameter, magische Wörter oder Parserfunktionen parst, musst du die #tag-Syntax nutzen, wie w:Template:Click es tut. In diesem Fall muss das vertikale Zeichen | durch eine Vorlage {{!}} ersetzt werden, wobei der Quelltext der Vorlage | ist (außer wenn sie innerhalb von Links oder Parametern erscheint).

Beispiel - Standardvariante
<imagemap>
File:ExamplePlant80.png|60px|ExamplePlant
rect 0 107 294 260 [[Plants/ExamplePlant|ExamplePlant]]
desc none
</imagemap>
Beispiel - mit Variable {{PAGENAME}}
{{#tag:imagemap|
File:ExamplePlant80.png{{!}}60px{{!}}ExamplePlant
rect 0 107 294 260 [[{{PAGENAME}}/ExamplePlant|ExamplePlant]]
desc none
}}
Beispiel – Modifiziert, um einen Eingabe-Parameter zur Kontrolle der Bildgröße zu akzeptieren

Diese Veränderungen erlaubt es, die Vorlagengröße auf der bearbeiteten (Ziel-)Seite anzupassen und die Erstellung doppelter Vorlagen für unterschiedliche Bildgrößen entfällt. 

{{#tag:imagemap|
Image:Examplename.jpg {{!}}{{{1|640px}}}
rect 0 107 294 260
circle 360 114 70
poly 357 216 363 417 211
desc none
}}

Wobei {{{1|640px}}} der Eingabeparameter “1” ist und die Standard-Bildgröße bei 640px liegt.

Hinweis: Der Eingabeparameter erfordert eine Zeichenkette, die mit “px” endet, damit er korrekt funktioniert.

Durch Abruf einer Vorlage {{TemplateName|400px}} wird die Vorlage mit 400 Pixeln angezeigt.

Um die (existierenden) standardmäßigen verweissensitiven Grafiken in dieses optionale Format umzuwandeln:

  • Ersetze das führende ‎<imagemap> durch {{#tag:imagemap|
  • Füge {{!}}{{{1|640px}}} nach dem Namen des Bildes ein (ändere die Standard-Bildgröße, damit sie mit der bisherigen Größe übereinstimmt).
Hinweis: Aufgrund der Änderung der Standardgröße (in diesem Beispiel 640px) auf die aktuelle Bildgröße müssen keine existierenden Vorlagenaufrufe verändert werden und sie werden weiterhin korrekt angezeigt. Existierende Vorlagenaufrufe können noch später durch Nutzung des Eingabeparameters verändert werden.
  • Ersetze das schließende ‎</imagemap> durch }} (die schließenden Klammern).

Siehe auch

Anleitungen
Wiki-Werkzeuge
Online-Werkzeuge
Ähnliche Funktionen
Retrieved from "https://www.mediawiki.org/w/index.php?title=Extension:ImageMap/de&oldid=6588924"