Aide:Image cliquable

Une page de Wikipédia, l'encyclopédie libre.
Sauter à la navigation Sauter à la recherche

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 | modifier le code]

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 | modifier le code]

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
À propos de cette image
Ici, un clic sur n’importe quel endroit de la carte mène à Cognac (eau-de-vie).

Plusieurs liens[modifier | modifier le code]

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 exemple :
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>

La RochelleAngoulêmeCognac (Charente)Carte des cognacs
À propos de cette image


<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>

La RochelleAngoulêmeCognac (Charente)
Carte des cognacs

Trouver les coordonnées pour imagemap[modifier | modifier le code]

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 :

Outils en ligne :

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 | modifier le code]

Icône pour souligner l'importance du texte
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 
  • donne :
  • 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 | modifier le code]

  • « 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 | modifier le code]

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 :

  • donne(aucune bulle d’aide n’apparaît au survol de l’image)
  • 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 | modifier le code]

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 :
donnequi est un lien automatique vers [[:]].
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, Drapeau de la France 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 | modifier le code]

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 Atelier accessibilité 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 | modifier le code]

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 | modifier le code]