Ce modèle permet l'addition de notes explicatives à des images en respectant la norme graphique actuelle (en particulier les textes peuvent contenir des liens et des références). Cette méthode permet d'avoir des annotations plus lisibles que des textes intégrés à l'image, surtout si l'image est réduite à la taille d'une vignette.
Parmi les autres utilisations, citons le recadrage d'une image pour exclure les parties non importantes et éventuellement agrandir les parties importantes, et l'internationalisation, puisque les annotations peuvent être modifiées sans changer l'image.
Syntaxe
{{Image annotée
| image =
| image-width =
| image-left =
| image-top =
| width =
| height =
| float =
| annotations =
{{Annotation|position depuis la gauche|position depuis le haut|texte}}
| caption =
}}
Paramètres
Les paramètres obligatoires sont affichés en rouge, ils sont également indiqués comme tels dans la description.
Liste des paramètres
Paramètre
Description
Exemple
image
Nom de l'image.
Obligatoire si imagemap n'est pas utilisé. Incompatible avec imagemap.
Graphique montrant le doublement du nombre de cas chaque année entre 2010 et 2015, puis une augmentation d'environ 20 % par an jusqu'en 2020.
width
Largeur totale (en pixels) de la boite contenant l'image et ses annotations. Doit être au moins aussi grande que la largeur de la partie de l'image affichée (indiquée avec image-width). [Obligatoire]
250
height
Hauteur totale (en pixels) de la boite contenant l'image et les annotations. Doit être au moins aussi grande que la hauteur de l'image affichée (indiquée avec image-height).
100
image-left
Abscisse du coin supérieur gauche de l'image par rapport au coin supérieur gauche de la boite contenant l'image. Les valeurs négatives servent à recadrer l'image.
Valeur positive
Une valeur positive décale le début de l'image par rapport au bord gauche de la boîte (augmentation de la marge entre la boîte et l'image).
Valeur négative
Un valeur négative recadre l'image d'autant.
Par défaut : 0
-850
image-top
Ordonnée du coin supérieur gauche de l'image par rapport au coin supérieur gauche de la boite contenant l'image. Les valeurs négatives servent à recadrer l'image.
Valeur positive
Une valeur positive décale le début de l'image par rapport au bord haut de la boîte (augmentation de la marge entre la boîte et l'image).
Valeur négative
Un valeur négative recadre l'image d'autant.
Par défaut : 0
-800
image-width
Largeur de l'image (en pixels). [Obligatoire]
320
annotations
Annotations pour l'image. Peut rester vide si l'on cherche seulement à recadrer l'image.
position du point de départ du trait (en %) par rapport au bord haut de l'image,
posX
position du point de départ du trait (en %) par rapport au bord gauche de l'image,
texte
contenu de l'étiquette,
distance
position de la fin du trait côté étiquette (en %), à partir du bord de l'image correspondant à celui indiqué dans le paramètre direction,
direction
direction du trait et position de l'étiquette par rapport au trait. Indication sous la forme d'une abréviation de point cardinal (aucun trait en diagonal n'est possible, les combinaisons n'influent que sur la position de l'étiquette par rapport à l'extrémité du trait) ;
valeurs possibles (survoler pour la définition) : n, ne, e, se, s, sw, w ou nw.
Attention : contrairement aux conventions habituelles, l'ordre des paramètres abscisse (posX) et ordonnée (posY) est inversé. Il faut d'abord indiquer l'ordonnée (posY).
Précise la position de la boite contenant l'image par rapport au contenu de l'article.
Valeurs possibles :
right
Boîte flottante à droite (par défaut, comme pour une image miniature).
left
Boîte flottante à gauche.
center
Boîte centrée.
none
Boîte non flottante.
right
outer-css
Propriétés CSS supplémentaire appliqué à la boîte la plus extérieure. Ne remplace pas les autres paramètres spécifiés pour la boîte extérieure (à utiliser en dernier recours).
image-bg-color
Couleur de fond de la boîte dans laquelle l'image est affichée. Utiliser un code couleur CSS (nom de couleur ou code hexadécimal) valide.
Par exemple, un fond sombre pour une image relativement sombre sur laquelle sont placées des annotations de couleur relativement claire.
white #FF8000
image-css
Propriétés CSS supplémentaire appliqué à (la boîte intérieure contenant) l'image. Ne remplace pas les autres paramètres spécifiés pour cette boîte (il est donc préférable de l'utiliser uniquement en « dernier recours »).
annot-text-align
Définit un alignement de texte par défaut pour toutes les annotations. Peut être modifié individuellement dans {{Annotation}}.
left
Alignement à gauche (par défaut).
right
Alignement à droite.
center
Alignement au centre.
center
annot-background-color
Définit une couleur de fond par défaut pour toutes les annotations. Utiliser un code couleur CSS (nom de couleur ou code hexadécimal) valide. Peut être modifié individuellement dans {{Annotation}}.
grey
annot-font-family
Définit une famille de polices de caractères par défaut pour toutes les annotations. Noter que la police utilisée pour une famille dépend de la configuration du navigateur et des polices installées sur l'ordinateur. Peut être modifié individuellement dans {{Annotation}}.
monospace
annot-font-size
Définit une taille de police (en pixels) par défaut pour toutes les annotations. Peut être modifié individuellement dans {{Annotation}}.
18
annot-font-weight
Définit la graisse (gras) utilisée par défaut pour toutes les annotations. Peut être modifié individuellement dans {{Annotation}}.
Définit un style de fonte (par ex. italique) par défaut pour toutes les annotations. Peut être modifié individuellement dans {{Annotation}}.
En pratique, seule la valeur italic est actuellement supportée par tous les navigateurs.
italic
annot-line-height
Définit une hauteur d'interligne par défaut pour toutes les annotations. S'applique uniquement aux annotations multi-lignes. Peut être modifié individuellement dans {{Annotation}}.
1.5
annot-color
Définit une couleur de texte (par exemple blanc) par défaut pour toutes les annotations. Utiliser un code couleur CSS (nom de couleur ou code hexadécimal) valide. Peut être modifié individuellement dans {{Annotation}}.
white #FF8000
Internationalisation
Ce modèle facilite l'internationalisation ; le texte est déjà séparé de l'image, il est donc facile de traduire le texte et, si nécessaire, de déplacer des morceaux de texte, car la longueur d'un même texte dans différentes langues peut varier considérablement. Par exemple, nl:Sjabloon:Zijbalk mariene extincties, la version néerlandaise de en:Template:Annotated image/Extinction, est largement utilisée.
Cette image a une largeur factuelle de 300 pixels (telle que stockée dans Commons), mais cela n'est pas important par l'utilisation du modèle.Toutes les mesures sont relatives à la largeur demandée à l'affichage de l'image (qu'elle soit réduite, normale ou agrandie). Dans l'exemple : 2000px.
Exemple
Image recadrée de La Joconde à partie d'une image de 2 000 pixels.
{{Image annotée
| image = Mona Lisa color restoration2.jpg
| image-width = 2000 <!-- Choisir la largeur souhaitée (mais pas n'importe quelle largeur) sans tenir compte de la largeur réelle de l'image qui n'entre pas en jeu.
Il peut être envisagé ou intéressant de diviser la paramètre width souhaité par le ratio entre la partie conservée et la la dimension originale pour obtenir ce paramètre image-width -->
| image-left = -850 <!-- recadre la partie gauche. Remarquez la présence du signe "-" -->
| image-top = -800 <!-- recadre la partie haute. Remarquez la présence du signe "-" -->
| width = 250 <!-- recadre la partie droite en donnant la largeur de l'image recadrée. -->
| height = 250 <!-- recadre la partie basse en donnant la hauteur de l'image recadrée. -->
| float =
| annotations = <!-- vide ou non, ce paramètre est obligatoire -->
| caption = Image recadrée de ''La Joconde'' à partie d'une image de 2 000 pixels.
}}
Le résultat est une portion de 250 x 250 pixels de l'image agrandie à 2 000 pixels (la taille réelle de l'image importe peu). Les 800 pixels supérieurs et les 850 pixels du côté gauche de l'image agrandie sont « rognés », même chose pour le reste du côté droit après les 250 pixels et en bas après les 250 pixels.
Ce modèle possède une mise en forme personnalisée.
Paramètre
Description
Type
État
Image
image
Nom de l'image à afficher.
Exemple
Exemple.jpeg
Fichier
obligatoire
ImageMap
imagemap
Utilisation de la syntaxe ImageMap pour générer une image avec des zones géométriques cliquables. Incompatible avec « Image ».
Contenu
facultatif
Image - alternative textuelle
alt
Alternative textuelle de l'image, pour l'accessibilité.
Exemple
Graphique montrant le doublement du nombre de cas chaque année entre 2010 et 2015, puis une augmentation d'environ 20 % par an jusqu'en 2020.
Ligne de texte
suggéré
Image - largeur
image-width
Largeur de l'image, permet d’agrandir ou réduire la taille de l'image d'origine
Exemple
300
Ligne de texte
obligatoire
Image - couleur d'arrière-plan
image-bg-color
Couleur d'arrière-plan derrière l'image, sous forme d'un nom ou d'un code de couleur CSS.
Exemple
« white », « #FF8000 »
Ligne de texte
facultatif
Image - style CSS
image-css
Style CSS spécial à appliquer à l'image. À n'utiliser qu'en cas de besoin.
Ligne de texte
facultatif
Légende
caption
Légende de l'image.
Exemple
Graphique représentant l'évolution depuis 2010.
Contenu
obligatoire
Position dans la page
float
Position d'affichage de l'image dans la page. Valeurs possibles : « right » (droite) ; « left » (gauche, par défaut) ; « center » (centré) ; « none » (non flottant).
Valeurs suggérées
rightleftcenternone
Par défaut
left
Ligne de texte
suggéré
Largeur
width
Largeur du cadre contenant l'image, en pixels.
Exemple
300
Nombre
obligatoire
Hauteur
height
Hauteur du cadre contenant l'image, en pixels.
Par défaut
Calculé d'après « Largeur »
Exemple
200
Nombre
suggéré
Style CSS extérieur
outer-css
Permet d'ajouter des propriétés CSS. À n'utiliser qu'en cas de besoin.
Ligne de texte
facultatif
Image - position depuis la gauche
image-left
Position du début de l'image depuis la gauche du cadre, en pixels. Une valeur positive augmente la marge entre le cadre et le début de l'image ; une valeur négative rogne l'image d'autant.
Exemple
-850
Ligne de texte
suggéré
Image - position depuis le haut
image-top
Position du début de l'image depuis le haut du cadre, en pixels. Une valeur positive augmente la marge entre le cadre et le début de l'image ; une valeur négative rogne l'image d'autant.
Inconnu
facultatif
Annotations
annotations
Annotations à ajouter. Utiliser des modèles {{Annotation}} ou {{Étiquette}}.
Exemple
{{Annotation|115|100|pupille}}
Contenu
suggéré
Annotations - style - alignement du texte
annot-text-align
Alignement du texte par défaut pour toutes les annotations. Valeurs possibles : « left » (gauche, par défaut), « right » (droite), « center » (centré).
Valeurs suggérées
leftrightcenter
Par défaut
left
Exemple
center
Ligne de texte
facultatif
Annotations - style - couleur d'arrière-plan
annot-background-color
Couleur d'arrière plan par défaut pour les annotations. Utiliser un code couleur CSS.
Exemple
« gray », « #FF8000 »
Ligne de texte
facultatif
Annotations - style - police
annot-font-family
Famille de police de caractères à utiliser.
Valeurs suggérées
serifsans-serifmonospacecursive
Ligne de texte
facultatif
Annotations - style - taille
annot-font-size
Taille par défaut du texte des annotations, en pixels.
Exemple
18
Nombre
facultatif
Annotations - style - gras
annot-font-weight
Mise en gras par défaut du texte des annotations. Valeurs possibles : « bold » (gras), « normal ».
Valeurs suggérées
boldnormal
Par défaut
normal
Exemple
bold
Ligne de texte
facultatif
Annotations - style - italique
annot-font-style
Mise en italique par défaut des annotations. Valeurs possibles : « italic » (italique), « normal ».
Valeurs suggérées
italicnormal
Par défaut
normal
Exemple
italic
Ligne de texte
facultatif
Annotations - style - couleur
annot-color
Couleur par défaut du texte des annotations. Utiliser un code couleur CSS valide.
Exemple
« green », « #FF8000 »
Ligne de texte
facultatif
Annotations - style - interligne
annot-line-height
Interligne par défaut pour les annotations multilignes.
