Modèle:Image annotée

Une page de Wikipédia, l'encyclopédie libre.

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

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

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

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

Exemples[modifier le code]

Image annotée avec {{Annotation}}[modifier le code]

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.
}}
  1. L'iris est gris dans une image en couleur.

Image annotée avec {{Étiquette}}[modifier le code]

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

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

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

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

Insertion d'une image avec des annotations.

Paramètres du modèle

Ce modèle possède une mise en forme personnalisée.

ParamètreDescriptionTypeStatut
Imageimage

Nom de l'image à afficher.

Exemple
Exemple.jpeg
Fichierobligatoire
ImageMapimagemap

Utilisation de la syntaxe ImageMap pour générer une image avec des zones géométriques cliquables. Incompatible avec « Image ».

Contenufacultatif
Image - alternative textuellealt

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.
Lignesuggéré
Image - largeurimage-width

Largeur de l'image, permet d’agrandir ou réduire la taille de l'image d'origine

Exemple
300
Ligneobligatoire
Image - couleur d'arrière-planimage-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 »
Lignefacultatif
Image - style CSSimage-css

Style CSS spécial à appliquer à l'image. À n'utiliser qu'en cas de besoin.

Lignefacultatif
Légendecaption

Légende de l'image.

Exemple
Graphique représentant l'évolution depuis 2010.
Contenuobligatoire
Position dans la pagefloat

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
Lignesuggéré
Largeurwidth

Largeur du cadre contenant l'image, en pixels.

Exemple
300
Nombreobligatoire
Hauteurheight

Hauteur du cadre contenant l'image, en pixels.

Par défaut
Calculé d'après « Largeur »
Exemple
200
Nombresuggéré
Style CSS extérieurouter-css

Permet d'ajouter des propriétés CSS. À n'utiliser qu'en cas de besoin.

Lignefacultatif
Image - position depuis la gaucheimage-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
Lignesuggéré
Image - position depuis le hautimage-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.

Inconnufacultatif
Annotationsannotations

Annotations à ajouter. Utiliser des modèles {{Annotation}} ou {{Étiquette}}.

Exemple
{{Annotation|115|100|pupille}}
Contenuobligatoire
Annotations - style - alignement du texteannot-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
Lignefacultatif
Annotations - style - couleur d'arrière-planannot-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 »
Lignefacultatif
Annotations - style - policeannot-font-family

Famille de police de caractères à utiliser.

Valeurs suggérées
serif sans-serif monospace cursive
Lignefacultatif
Annotations - style - tailleannot-font-size

Taille par défaut du texte des annotations, en pixels.

Exemple
18
Nombrefacultatif
Annotations - style - grasannot-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
Lignefacultatif
Annotations - style - italiqueannot-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
Lignefacultatif
Annotations - style - couleurannot-color

Couleur par défaut du texte des annotations. Utiliser un code couleur CSS valide.

Exemple
« green », « #FF8000 »
Lignefacultatif
Annotations - style - interligneannot-line-height

Interligne par défaut pour les annotations multilignes.

Exemple
1.5
Lignefacultatif

Voir aussi[modifier le code]

Voir les statistiques d'utilisation du modèle sur l'outil wstat.