Extension:ImageMap

Cette extension est fournie avec MediaWiki 1.21 et supérieur. Ainsi vous n'avez pas besoin de télécharger à nouveau. Néanmoins, vous devez encore suivre les autres instructions fournies.

Manuel des extensions MediaWiki

ImageMap État de la version : stable
Implémentation	Balise
Description	Autorise les images HTML cliquables
Auteur(s)	Tim Starlingdiscussion
Dernière version	mises à jour continues
MediaWiki	1.23+
PHP	5.4+
Composer	mediawiki/image-map
Licence	Licence publique générale GNU v2.0 ou supérieur
Téléchargement	Télécharger l'extension Git [?]: Télécharger la branche master de Git parcourir le dépôt (Phabricator · GitHub) historique des validations (commits) contributeurs du dépôt (GitHub) relecture du code log
Exemple	Children's encyclopedia
Accroches utilisées ParserFirstCallInit
Téléchargements trimestriels	86 (Ranked 64th)
Utilisé par les wikis publics	10,714 (Ranked 16th)
Traduire l’extension ImageMap sur translatewiki.net si elle y est disponible
Problèmes	Tâches ouvertes · Signaler un bogue

L'extension ImageMap permet d'utiliser les cartographies d'images. Une cartographie d'image est une liste de coordonnées sur une image donnée, qui lie des zones de l'image à différentes destinations (contrairement au lien classique d'image où la totalité de l'image est liée à une seule destination). Par exemple, sur une carte du monde, chaque pays peut être relié par un hyperlien à d'autres informations sur ce pays. L'objectif d'une image interactive est de fournir un moyen facile de lier différentes parties d'une image sans avoir à diviser l'image en fichiers image séparés.

Exemples

Exemple simple sans légende

<imagemap>
File:Example2.png|150px|alt=texte_alternatif
default [[Main Page|Aller à la page d'accueil]]
</imagemap>

L'exemple ci-dessus renvoie toujours à Main Page, peu importe où vous cliquez. Pour en savoir plus sur l'image, cliquez sur l'icône bleue i . Une autre façon de créer une telle image liée, sans utiliser cette extension, serait avec [[File:Example2.png|150px|alt=Alt text|title=Aller à la page principale|link=Page principale]]

Exemple complexe avec légende

Cet exemple affiche une vignette de 500 pixels de large sur une hauteur de 250 pixels; l'image originale a une largeur de 9600 pixels et une hauteur de 4800 pixels. Les coordonnées de chaque sommet sont données en pixels et représentent un point de l'image originale. Donc par exemple les sommets du polygone qui entourent Jude (le second à partir de l'extrême droite de l'image) a des coordonnées horizontales (mesurées en pixels à partir de la gauche) dans l'intervalle 7904 – 8635 et des coordonnées verticales (mesurées aussi en pixels mais à partir du haut de l'image) dans l'intervalle 2096 – 3260, qui se situent loin au-delà de l'intervalle 500 × 250 représenté par la vignette, mais dans l'intervalle 9600 × 4800 de l'image originale. Notez qu'un sommet du polygone entourant Simon (à l'extrême droite de l'image), le sommet de coordonnées 9625 3301, s'étend au dela des limites de l'image originale de taille 9600 × 4800 pixels.

<imagemap>
File:The Last Supper - Leonardo Da Vinci - High Resolution 32x16.jpg|thumb|center|500px|alt=''Le dernier repas'' par Leonard de Vinci - Image cliquable|Exemple d'image cartographiée. En cliquant sur un personnage de l'image, le navigateur chargera l'article approprié.

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>

Exemple d'image cartographiée. Cliquer sur un personnage de l'image pour charger l'article approprié.

L'exemple ci-dessus renvoie à de nombreuses pages différentes, selon l'endroit où vous cliquez. Pour en savoir plus sur l'image, cliquez sur l'icône double rectangle

Description de la syntaxe

Le contenu d'une balise ‎<imagemap> est formé de lignes vides, de commentaires (commençant par '#') et de lignes logiques.

La première ligne logique spécifie l'image à afficher. Utiliser le même format que pour les liens ordinaires vers les images MediaWiki (voir l'aide sur les images), mais en excluant les balises englobantes [[ et ]].

Si la première ligne indique une image thumb ou frame, alors la légende de la première ligne et tout paramètre |alt= sont traités comme étant la légende de l'image et le texte du alt de manière usuelle; sinon, le paramère |alt= de la première ligne (ou s'il est absent, tout commentaire) spécifie le texte alt de l'image.

En aucun cas l'image elle-même n'a de texte de titre (souvent utilisé pour les info-bulles) ; tout texte de titre est tiré des régions décrites dans les lignes suivantes.

D'autres lignes sont divisées avec des marques, séparées par des espaces. La fonction de chaque ligne est déterminée par la première marque de la ligne.

Une coordonnée se compose de deux marques. La première marque est la position horizontale X, et la seconde est la position verticale Y. Toutes les coordonnées sont exprimées en fonction de l'image en pleine taille, et non pas de l'image visible. Les marques X et Y doivent être spécifiées comme étant la distance du bord gauche (nombre de pixels horizontaux) et la distance du haut (nombre de pixels verticaux) de l'image en pleine taille.

desc

Spécifie l'emplacement d'une icône i bleue , qui renvoie à la description de l'image. Valeurs possibles : top-right, bottom-right (par défaut), bottom-left, top-left, none. Ce paramètre est ignoré pour les images "thumb" et "frame", qui utilisent plutôt l'icône double rectangle habituelle .

poly

Un polygone dont les coordonnées des sommets sont indiquées et suivies d'un lien entre crochets.

rect

Un rectangle dont les paramètres sont les coordonnées des coins supérieur gauche et inférieur droit, suivis d'un titre à lier entre crochets.

Exemple

<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

Un cercle. Les deux premiers paramètres sont les coordonnées du centre, et le troisième est le rayon. Les coordonnées sont suivies d'un lien entre crochets.

default

Donne le lien par défaut quand aucune autre région n'est spécifiée.

Toutes les coordonnées sont spécifiées par rapport à l'image source. L'image peut être mise à l'échelle à l'aide de la syntaxe des vignettes, auquel cas les coordonnées de l'image seront mises à l'échelle automatiquement.

Tous les liens sont donnés soit sous la forme [[titre_de_page]] ou [[titre_de_page|description]]. Dans ce dernier cas, la partie après la barre verticale '|' devient l'attribut de titre du lien - dans la plupart des navigateurs, il apparaîtra sous forme d'info-bulle lorsque l'utilisateur le survolera ; la partie qui suit le '|' devient également le texte alternatif du lien. Si aucune description de lien explicite n'est donnée, le titre de la page est utilisé.

Les zones qui se chevauchent donnent la priorité au premier lien répertorié.

Installation

Cette extension est livrée avec MediaWiki 1.21 et les suivants. Ainsi vous n'avez pas besoin de la télécharger à nouveau.

Assurez-vous que les téléchargements et ImageMagick sont installés :

$wgEnableUploads = true;
$wgUseImageMagick = true;
$wgImageMagickConvertCommand = "/usr/bin/convert";

• Téléchargez et placez le(s) fichier(s) dans un répertoire appelé ImageMap dans votre dossier extensions/.
  Les développeurs et les contributeurs au code doivent à la place installer l'extension à partir de Git en utilisant:cd extensions/
git clone https://gerrit.wikimedia.org/r/mediawiki/extensions/ImageMap
• Ajoutez le code suivant à la fin de votre fichier LocalSettings.php  :

  wfLoadExtension( 'ImageMap' );
  

•  Fait – Accédez à Special:Version sur votre wiki pour vérifier que l'extension a bien été installée.

Dépannage

1. Vérifiez si votre DOM php est activé. Vous devrez peut-être l’installer si ce n’est pas le cas.
2. Vérifier que ImageMagick est installée, car elle utilise /usr/bin/convert pour le redimensionnement. S'il est absent, il est possible d'avoir une page avec seulement les erreurs XML (conseil : utiliser le bouton Arrière du navigateur, car vous pouvez encore modifier la page).
3. Sur l'hébergement mutualisé OVH $wgUseImageMagick devrait être comme ː $wgUseImageMagick=false;

Composer

Vous pouvez aussi installer cette extension en utilisant le support intégré Composer .

composer require mediawiki/image-map @dev

Utiliser Composer pour installer cette extension provoquera l’installation de la dernière version de développement de cette extension chaque fois que vous faites une commande composer update --no-dev

Utiliser des modèles, des mots magiques ou des fonctions d'analyse

Si vous souhaitez que cette extension (as with most tag extensions) analyse les paramètres du modèle, les mots magiques, ou les fonctions de l'analyseur, vous devrez utiliser la syntaxe #tag, comme le faisait w:Template:Click. Dans ce cas, la barre verticale | doit être remplacée par un modèle {{!}}, où le texte source du modèle est | (sauf quand ils apparaissent dans les liens ou les paramètres).

Exemple - formulaire standard

<imagemap>
File:ExamplePlant80.png|60px|ExamplePlant
rect 0 107 294 260 [[Plants/ExamplePlant|ExamplePlant]]
desc none
</imagemap>

Exemple - avec la variable {{PAGENAME}}

{{#tag:imagemap|
File:ExamplePlant80.png{{!}}60px{{!}}ExamplePlant
rect 0 107 294 260 [[{{PAGENAME}}/ExamplePlant|ExamplePlant]]
desc none
}}

Exemple – Modification pour accepter un paramètre d’entrée contrôlant la taille de l’image

Ces modifications permettent d’ajuster la taille du modèle sur la page (cible) modifiée et d’éliminer la nécessité de créer des modèles en double adaptés aux différentes tailles d’images.

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

Où {{{1|640px}}} est le paramètre d'entrée « 1 » et la taille par défaut de la page est de 640 pixels.

Note: le paramètre d'entrée nécessite que la chaîne de caractères se termine par px pour fonctionner correctement.

Par exemple, l'appel d'un modèle {{TemplateName|400px}} affichera le modèle sur 400 pixels.

Pour convertir les cartes d’images standard (existantes) dans ce format facultatif :

• Remplacer le ‎<imagemap> initial par {{#tag:imagemap|
• Ajouter {{!}}{{{1|640px}}} après le nom de l'image (modifier la taille par défaut de l'image pour qu'elle corresponde à celle du fichier actuel existant).

Note : en remplaçant la taille par défaut (640 pixels dans cet exemple) par la taille actuelle de l'image, aucun des appels existants au modèle n'a besoin d'être modifié et affichera correctement. Les appels existants, faits aux modèles, peuvent encore être modifiés ultérieurement en utilisant le paramètre d'entrée.

• Remplacer the ‎</imagemap> final par }} (accolades fermantes).

Voir aussi

Instructions

• Guide simple sur la manière d'utiliser l'éditeur Image Map avec l'extension ImageMap disponible à ImageMapEdit comment faire ? sur Meta-Wiki.
• Editeur de cartographie d'image maschek et son guide d'utilisation détaillé.
• Wikimedia Commons possède également une page de ressources sur la cartographie des images : Commons:Image map resources
• Exemples existants de cartes d’images : Catégorie:images Wikipedia cartographiées

Outils Wiki

• meta:User:Dapete/ImageMapEdit#English - Le script ImageMapEdit est un outil graphique pour déterminer les coordonnées qui peuvent être installées sur n’importe quel wiki.

Outils en ligne

• http://www.maschek.hu/imagemap/imgmap Éditeur de carte d’images en ligne, prend en charge toutes les formes; il est compatible avec Extension:ImageMap.
• http://www.image-maps.com/index.php? Mappage d’images en ligne; cartographieur basique.
• http://summerstyle.github.io/summer/ - Mappage d’images en ligne; cartographieur interactif à source ouvert

Fonctionnalités similaires

• Extension:DrawioEditor - travailler avec des diagrammes et des dessins