Modèle:Image annotée

Documentation[voir] [modifier] [historique] [purger]

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 modifier

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

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`.	`Exemple.jpeg`
`imagemap`	Pour utiliser une image cliquable (imagemap) générée via l'extension ImageMap. 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`	Légende de l'image. [Obligatoire]	`Graphique représentant l'évolution depuis 2010.`
`alt`	Alternative textuelle (accessibilité).	`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. Utilisation de modèles {{Annotation}} Syntaxe simplifiée : `{{Annotation\|posX\|posY\|texte}}` `posX` position du début du texte (en pixels) par rapport au bord gauche de l'image, `posY` position du haut du texte (en pixels) par rapport au bord haut de l'image, `texte` contenu de l'annotation. D'autres paramètres optionnels sont disponibles, consultez la documentation du modèle. Utilisation de modèles {{Étiquette}} Syntaxe simplifiée : `{{Étiquette\|posY\|posX\|texte\|distance\|direction}}` `posY` 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`). D'autres paramètres optionnels sont disponibles, consultez la documentation du modèle.	`{{Annotation\|115\|100\|pupille}}` `{{Étiquette\|50\|60\|iris\|20\|e}}`
`float`	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}}. Par défaut : `transparent`	`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}}. 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`	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 modifier

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.

Images annotées modifier

Aide détaillée : Aide:Image complétée et en:Template:Annotated image/doc/Samples.

Exemples modifier

Image annotée avec {{Annotation}} modifier

iris^[1]

pupille

Image annotée de l'œil.

{{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.
}}

↑ L'iris est gris dans une image en couleur.

Image annotée avec {{Étiquette}} modifier

iris

pupille

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

Image annotée avec {{Étiquette}} avec réduction de taille modifier

Le traitement automatique en pourcentages des position des {{Étiquette}} évite de tout redimensionner.

iris

pupille

Image annotée de l'œil.

{{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.
}}

Image recadrée modifier

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 :

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 modifier

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 n'importe quelle largeur, comme on le souhaite. La largeur réelle de l'image n'a pas d'importance. -->
 | 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.

TemplateData modifier

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.
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 `right` `left` `center` `none` 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 `left` `right` `center` 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. Par défaut transparent Exemple « gray », « #FF8000 »	Ligne de texte	facultatif
Annotations - style - police	`annot-font-family`	Famille de police de caractères à utiliser. Valeurs suggérées `serif` `sans-serif` `monospace` `cursive`	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 `bold` `normal` 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 `italic` `normal` 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. Exemple 1.5	Ligne de texte	facultatif

Voir aussi modifier

{{Annotation}}, pour créer les annotations.
{{Étiquette}}, pour mettre des étiquettes au lieu d'annotations.
{{Début de carte}} et {{Fin de carte}} comme modèle alternatif.
{{Détail image}} comme modèle alternatif pour recadrer une image
Aide:Image cliquable, pour ajouter des zones géométriques (rectangles, cercles ou polygones) cliquables sur une image.

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.

[1] L'iris est gris dans une image en couleur.

[1]