Aide:Image cliquable

Les images cliquables (en anglais, image maps) permettent de rendre sensible certaines zones d’une image et d’y définir des liens hypertexte. Elles sont notamment utiles en cartographie.

Dans les articles : <imagemap> modifier

Depuis 2007, grâce à l’extension ImageMap, il est possible de créer des liens sur une image, sur toute sa surface ou bien à des endroits précis et sur des zones de formes diverses. Ceci s’avère particulièrement utile, par exemple, pour cliquer sur différentes zones d’une carte.

Un lien général modifier

Il est possible de ne faire qu’un lien sur l’intégralité de l’image.

Voici la syntaxe simplifiée :

`<imagemap> Fichier:Nom de l’image\|..?..px\|texte de remplacement default [[ici lien vers un article]] desc bottom-right </imagemap>`

Syntaxe	Rendu
`<imagemap> Fichier:Cognac france map-fr.svg\|150px\|Carte des cognacs default [[Cognac (eau-de-vie)]] desc bottom-right </imagemap>`	Carte des cognacs
Ici, un clic sur n’importe quel endroit de la carte mène à Cognac (eau-de-vie).

Plusieurs liens modifier

La surface de l’image peut comporter plusieurs zones cliquables (de formes diverses et paramétrables) qui renvoient chacune vers un article différent et le lien vers la page descriptive de l’image est placé au choix dans l’un des angles ou n’apparait pas.

N.B. : cette extension est complexe, et demande une certaine connaissance de la syntaxe.

Voici la syntaxe générale :

`<imagemap> Fichier:Nom de l’image\|taille de l’image\|texte de remplacement poly position-du-lien-1 [[lien-1]] rect position-du-lien-2 [[lien-2]] circle position-du-lien-3 [[lien-3]] desc position-de-la-description </imagemap>`

Fichier: La première ligne d’une <imagemap> consiste à spécifier l’image qui sera utilisée, ainsi que sa taille. Elle utilise la même syntaxe que toutes les autres images, sans les [[]], et autre option de positionnement. Il n’y a pas de légende, mais un texte de remplacement au cas où l’image ne serait pas visible.

Le paramètre default utilisé pour une image n’ayant qu’un seul lien sur toute sa surface ne doit pas être utilisé dans ce cas.

Puis suit la liste des zones cliquables :
Attention, l’ordre des formes utilisées doit être conservé : d’abord tous les polygônes (poly) puis les rectangles (rect) et enfin les cercles (circle). Si deux zones se superposent, c’est la première dans l’ordre de la liste qui sera à l’avant-plan. Les coordonnées spécifiées sont données à partir de l’image en taille réelle, non avec la taille en pixels choisie sur la page encyclopédique.

Voir comment trouver les coordonnées des zones cliquables : #Trouver les coordonnées pour imagemap.

poly: Pour former un polygone. « Position-du-lien-? » est à remplacer par plusieurs nombres successifs séparés par un espace : Les coordonnées des sommets sont données, suivies par un lien entre crochets
rect: Pour former un rectangle. « Position-du-lien-? » est à remplacer par quatre nombres successifs séparés par un espace : Les paramètres sont les coordonnées de l’angle haut-gauche, vers l’angle du bas à droite, suivies par un lien entre crochets
circle: Pour former un cercle. « Position-du-lien-? » est à remplacer par trois nombres successifs séparés par un espace : Les deux premiers paramètres définissent le centre, le troisième concerne le rayon du cercle, suivis par un lien entre crochets
desc: Spécifie la location de l’icône bleu, avec un « i » qui assure le lien vers la page de description de l’image. Peut prendre les valeurs de top-right (haut à droite), bottom-right (bas à droite), bottom-left (bas à gauche), top-left (haut à gauche) ou none (aucune description).

Voici deux exemples :

Syntaxe	Rendu
`<imagemap> Fichier:Cognac france map-fr.svg\|300px\|Carte des cognacs rect 500 30 30 300 [[La Rochelle]] circle 700 550 100 [[Angoulême]] circle 499 425 50 [[Cognac (Charente)]] desc bottom-right </imagemap>`	Carte des cognacs
`<imagemap> Fichier:Cognac france map-fr.svg\|thumb\|300px\|Carte des cognacs rect 500 30 30 300 [[La Rochelle]] circle 700 550 100 [[Angoulême]] circle 499 425 50 [[Cognac (Charente)]] desc bottom-right </imagemap>`	Carte des cognacs

Trouver les coordonnées pour imagemap modifier

Zone circulaire : 1 = 760 pixels, 2 = 510 pixels, 3 = 120 pixels.

Le plus simple pour trouver les coordonnées de points afin de définir des formes cliquables sur une image est d’afficher celle-ci en taille réelle avec un logiciel de retouche d’image qui indique les coordonnées du pointeur, en nombre de pixels. Il n’y a alors plus qu’à noter celles-ci. Sinon il faut procéder par approximations.

Il existe aussi un éditeur de coordonnées, en anglais :

Mode d’emploi de cet éditeur : A simple guide on how to use the Image Map editor with the ImageMap extension can be found on wikiHow.
commons.wikimedia.org a également une page explicative : c:Commons:Image_map_resources
meta:User:Dapete/ImageMapEdit, génère directement le code nécessaire

Outils en ligne :

Image-maps, mapper basique en ligne.
imagemap-generator.dariodomi.de, facilite l'obtention des coordonnées pour les polygones.

Les outils en ligne nécessitent de remplacer les virgules par des espaces (par exemple dans un éditeur de texte avec la fonction rechercher/remplacer).

Exemple : La zone circulaire définie autour d’Angoulême sur cette carte correspond approximativement aux coordonnées 760 510 120.

Faire un lien sur une image (hors des articles) modifier

Cette syntaxe est interdite dans les articles, car elle rend la page de l’image inaccessible, donc sa licence et son auteur. Elle est cependant tolérée, pour des questions d’ergonomie, sur des icônes incluses dans des modèles.

La fonctionnalité du lien sur image est maintenant disponible. Le lien est défini par le paramètre link=, et il peut s’agir d’une page du wiki ou d’un lien externe.

Exemples

[[Fichier:Commons-logo.svg|16px|alt=Le Bistro|link=Wikipédia:Le Bistro]]
donne :
[[Fichier:Commons-logo.svg|16px|alt=Google|link=http://www.google.fr]]
donne :

À noter que les liens rouges ne sont pas détectés par cette syntaxe (tout comme les liens vers des redirections).

« alt » et « link » modifier

« alt » donne une alternative textuelle à l’image quand celle-ci n’est pas visible : [[Fichier:truc bidule.png|alt=truc bidule]] ou [[Fichier:truc bidule.png|thumb|alt=truc bidule|Légende]].
« link » crée en plus un lien vers un article, une page meta ou une page externe ou bien encore permet de supprimer tout lien cliquable sur l’image.

Dans les articles, on utilise principalement le paramètre « alt ». Ce paramètre doit toujours être présent, d’autant plus quand le titre du fichier image est incompréhensible. En revanche, le paramètre « link » n’est pas approprié pour les illustrations des articles et il n’y est utilisé qu’exceptionnellement, pour quelques icônes.

« alt » implicite ou explicite modifier

Si l’image est un « thumb » (vignette standard avec légende), le paramètre alt doit toujours être explicite, ce qui le différencie de la légende du thumb.

Si l’image n’est pas un thumb, la mention alt= peut être implicite : [[Fichier:truc bidule.png|truc bidule]]. Dans ce cas, le texte de l’alternative apparaît également au survol de l’image :

[[Fichier:Commons-logo.svg|alt=truc bidule|16px]] donne (aucune bulle d’aide n’apparaît au survol de l’image)
[[Fichier:Commons-logo.svg|truc bidule|16px]] donne (une bulle d’aide avec le texte de l’alternative « truc bidule » apparait au survol de l’image)

On choisira d’utiliser un paramètre alt implicite ou explicite selon le besoin de faire apparaître le texte dans la bulle d’aide au survol du lien.

« link » absent modifier

Si le paramètre link est absent (exemple : [[Fichier:truc bidule.png|truc bidule]]), l’image aura automatiquement un lien cliquable vers le fichier de cette image :
[[Fichier:Commons-logo.svg|truc bidule|16px]] donne qui est un lien automatique vers Fichier:Commons-logo.svg.
Dans ce cas, il faut un alt qui permette de savoir que c’est lien vers une page d’image. Par exemple, par le biais des modèles idoines, a pour alt « Drapeau de la France » et pas « France » tout court.

Normalement, ce type d’usage n’est pas adapté aux articles, sauf pour des petites images comme les drapeaux ou les écussons, par le biais de modèles appropriés.

« link » rempli modifier

Si le paramètre link est renseigné avec le nom d’un article, d’une page meta ou d’une page externe ([[Fichier:truc bidule.png|truc bidule|link=article truc]]) c’est que l’on souhaite que l’image devienne un lien vers une page particulière :
Par exemple [[Fichier:Gnome-preferences-desktop-accessibility.svg|Atelier accessibilité|link=Wikipédia:Atelier accessibilité|16px]] donne qui est un lien automatique vers Wikipédia:Atelier accessibilité.
Dans ce cas, il faut un alt qui permette de savoir quel est sa cible, ici « Atelier accessibilité ». On ne doit le faire que si c’est une image du domaine public ou une image mentionnée dans Wikipédia:Crédits graphiques.

C’est plutôt un cas qu’on rencontre en dehors des articles.

« link » vide modifier

Si le paramètre link est présent mais laissé vide ([[Fichier:truc bidule.png|alt=truc bidule|link=]]) c’est que l’on veut que l’image ne soit pas un lien cliquable, ni vers le fichier de l’image, ni vers autre chose. On ne doit le faire que si c’est une image du domaine public ou une image mentionnée dans Wikipédia:Crédits graphiques :
[[Fichier:Commons-logo.svg|alt=|link=|16px]] donne qui n’est pas cliquable.
Dans ce cas, le alt sera vide ou pas selon que l’image apporte ou non une information qui n’est pas déjà dans le texte où elle se trouve.

C’est un cas fréquent dans les bandeaux mais, a priori, pas destiné aux images de contenu dans les articles.

Voir aussi modifier

(en) en:Wikipedia:Wikipedia Signpost/2008-03-03/Tutorial : tutoriel en anglais