Aide:Image cliquable

Un article de Ékopédia, l'encyclopédie pratique.
Aller à : navigation, rechercher

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.

Nuvola apps help index.png
Aide rapide...







Comment bien contribuer...



Cette boite dans ma page :
{{Navigation Aide}}

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 :

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

Syntaxe Rendu

<poem> <imagemap> Fichier:Bicycle with Rider.svg|150px|Bicycle default [[Vélo]] desc bottom-right </imagemap> </poem>

<imagemap> : l’image est invalide ou n’existe pas

Ici, un clic sur n’importe quel endroit de la carte mène à Vélo.

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 :

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

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.

Vista-xmag.png 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 un exemple :
Syntaxe Rendu

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

<imagemap> : l’image est invalide ou n’existe pas

Trouver les coordonnées pour imagemap[modifier]

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 :

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]

Avertissement important.gif 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 

À 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:Exemple.jpg|alt=truc bidule|16px]] donne 16px (aucune bulle d’aide n’apparaît au survol de l’image)
  • [[Fichier:Exemple.jpg|truc bidule|16px]] donne 16px (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:Exemple.jpg|truc bidule|16px]] donne 16px qui est un lien automatique vers Fichier:Exemple.jpg.
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, [[Fichier:Modèle:Country flag alias France|20x18px|border|Drapeau : Modèle:Country alias 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]

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 16px 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 16px 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]