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.
{{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 = }}
Les paramètres obligatoires sont affichés en rouge, ils sont également indiqués comme tels dans la description.
image
Obligatoire si imagemap n'est pas utilisé. Incompatible avec imagemap.
imagemap
Exemple.jpeg
Voir Aide:Image cliquable pour la syntaxe ImageMap.
Obligatoire si image n'est pas utilisé. Incompatible avec image.
<imagemap> Image:Zams and tracks.png|500px poly 380 230 780 530 750 560 350 260 [[Main Sequence]] desc none </imagemap>
caption
Graphique représentant l'évolution depuis 2010.
alt
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
image-width
250
height
image-height
100
image-left
Par défaut : 0
0
-850
image-top
-800
320
annotations
{{Annotation|posX|posY|texte}}
posX
posY
texte
{{Étiquette|posY|posX|texte|distance|direction}}
distance
direction
n
ne
e
se
s
sw
w
nw
{{Annotation|115|100|pupille}}
{{Étiquette|50|60|iris|20|e}}
float
Valeurs possibles :
right
left
center
none
outer-css
image-bg-color
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
annot-text-align
annot-background-color
grey
annot-font-family
monospace
annot-font-size
18
annot-font-weight
Des mots-clés et des valeurs numériques sont possibles, mais certaines polices gèrent cela de manière limitée. En pratique, se contenter de la valeur bold pour mettre en gras.
bold
annot-font-style
En pratique, seule la valeur italic est actuellement supportée par tous les navigateurs.
italic
annot-line-height
1.5
annot-color
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.
{{Image annotée | image = Eye iris.jpg | image-width = 320 | width = 320 | height = | float = | annotations = {{Annotation|180|100|[[iris (anatomie)|iris]]<ref>L'iris est gris dans une image en couleur.</ref>|background-color=white}} {{Annotation|115|100|pupille|background-color=white}} | caption = Image annotée de l'œil. }}
{{Image annotée | image = Eye iris.jpg | image-width = 320 | width = 320 | height = | float = | annotations = {{Étiquette|50|60|iris|20|e}} {{Étiquette|50|40|{{blanc|pupille}}|40|n}} | caption = Image annotée de l'œil. }}
Le traitement automatique en pourcentages des position des {{Étiquette}} évite de tout redimensionner.
{{Image annotée | image = Eye iris.jpg | image-width = 200 | width = 200 | height = | float = | annotations = {{Étiquette|50|60|iris|20|e}} {{Étiquette|50|40|{{blanc|pupille}}|40|n}} | caption = Image annotée de l'œil. }}
On a une image comme Fichier:Mona Lisa color restoration2.jpg. Mais on souhaite montrer seulement une partie de l'image, disons le nez et la bouche :
{{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.
Insertion d'une image avec des annotations.
Paramètres du modèle[Modifier les données du modèle]
Ce modèle possède une mise en forme personnalisée.
Nom de l'image à afficher.
Utilisation de la syntaxe ImageMap pour générer une image avec des zones géométriques cliquables. Incompatible avec « Image ».
Alternative textuelle de l'image, pour l'accessibilité.
Largeur de l'image, permet d’agrandir ou réduire la taille de l'image d'origine
Couleur d'arrière-plan derrière l'image, sous forme d'un nom ou d'un code de couleur CSS.
Style CSS spécial à appliquer à l'image. À n'utiliser qu'en cas de besoin.
Légende de l'image.
Position d'affichage de l'image dans la page. Valeurs possibles : « right » (droite) ; « left » (gauche, par défaut) ; « center » (centré) ; « none » (non flottant).
Largeur du cadre contenant l'image, en pixels.
Hauteur du cadre contenant l'image, en pixels.
Permet d'ajouter des propriétés CSS. À n'utiliser qu'en cas de besoin.
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.
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.
Annotations à ajouter. Utiliser des modèles {{Annotation}} ou {{Étiquette}}.
Alignement du texte par défaut pour toutes les annotations. Valeurs possibles : « left » (gauche, par défaut), « right » (droite), « center » (centré).
Couleur d'arrière plan par défaut pour les annotations. Utiliser un code couleur CSS.
Famille de police de caractères à utiliser.
serif
sans-serif
cursive
Taille par défaut du texte des annotations, en pixels.
Mise en gras par défaut du texte des annotations. Valeurs possibles : « bold » (gras), « normal ».
normal
Mise en italique par défaut des annotations. Valeurs possibles : « italic » (italique), « normal ».
Couleur par défaut du texte des annotations. Utiliser un code couleur CSS valide.
Interligne par défaut pour les annotations multilignes.
La documentation de ce modèle est générée par le modèle {{Documentation}}.Elle est incluse depuis sa sous-page de documentation. Veuillez placer les catégories sur cette page-là.Les éditeurs peuvent travailler dans le bac à sable (créer) et la page de test (créer).Voir les statistiques d'utilisation du modèle sur l'outil wstat.
