Utilisateur:Yodaspirine/Aides et principes/Mise en forme avancée des images
Insérer une image
Mise en forme des images
Mise en forme avancée des images
Taille invariable
[modifier | modifier le code]Son usage doit rester exceptionnel car ce paramètre nuit à l'accessibilité des images pour certains lecteurs.
- Code:
|....px|
- à utiliser pour les schémas lisibles seulement à partir d'une taille précise, ce paramètre correspond à une taille absolue, par exemple 250px.
- Exemple:
|100px|
- code complet :
donne le rendu suivant :
- code complet :
Voir ci-dessous quelques exemples de tailles courantes afin d'avoir une idée du résultat final. Ce type de paramètre en pixels n'est pas recommandé dans les articles, sauf dans le cas de documents illisibles en taille réduite.
Galeries : Options d'usage plus rare
[modifier | modifier le code]Autres paramètres éventuels
[modifier | modifier le code]Les galeries créées avec <gallery>
peuvent éventuellement avoir quatre paramètres supplémentaires :
perrow
donne le nombre d'images maximum par ligne (si la résolution de l'affichage l'autorise, sinon le nombre d'images par ligne sera réduit pour s'adapter à celle-ci).showfilename=oui
: affiche automatiquement le nom du fichier image dans sa légende (si une légende est précisée, le nom de fichier s'ajoute à celle-ci),widths
donne la largeur maximale des image (ne pas utiliser),heights
donne la hauteur maximale des images (ne pas utiliser).
Exemple d'utilisation de perrow
:
<gallery perrow="3" caption="Galerie avec paramètre perrow"> Fichier:Wikipedia svg logo-fr.svg Fichier:Wikipedia svg logo-fr.svg Fichier:Wikipedia svg logo-fr.svg Fichier:Wikipedia svg logo-fr.svg. Fichier:Wikipedia svg logo-fr.svg Fichier:Wikipedia svg logo-fr.svg Fichier:Wikipedia svg logo-fr.svg Fichier:Wikipedia svg logo-fr.svg Fichier:Wikipedia svg logo-fr.svg </gallery>
Résultat :
- Galerie avec paramètre perrow
Exemple d'utilisation de showfilename:
<gallery caption="Galerie avec paramètre showfilename" showfilename="oui"> Fichier:Wikipedia svg logo-fr.svg Fichier:Exemple.jpg Fichier:Wikipedia svg logo-fr.svg|Une légende personnalisée ajoutée au nom du fichier </gallery>
Résultat :
- Galerie avec paramètre showfilename
-
Wikipedia svg logo-fr.svg Une légende personnalisée ajoutée au nom du fichier
Images cliquables : <imagemap>
[modifier | modifier le code]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 | modifier le code]Il est possible de ne faire qu’un lien sur l’intégralité de l’image.
- Voici la syntaxe simplifiée :
<imagemap>
Fichier:Nom de l’image|..?..px|texte de remplacement
default [[ici lien vers un article]]
desc bottom-right
</imagemap>
Syntaxe | Rendu |
---|---|
|
|
Ici, un clic sur n’importe quel endroit de la carte mène à Cognac (eau-de-vie). |
Plusieurs liens
[modifier | modifier le code]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 :
<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>
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.
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) ounone
(aucune description).
- Voici un exemple :
Syntaxe | Rendu |
---|---|
|
|
Trouver les coordonnées pour imagemap
[modifier | modifier le code]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 :
- Mode d’emploi de cet éditeur : A simple guide on how to use the Image Map editor with the ImageMap extension can be found on wikiHow.
- L’éditeur : A graphical tool to determine the coordinates. Author: meta:User:Dapete
Exemple : La zone circulaire définie autour d’Angoulême sur cette carte correspond approximativement aux coordonnées 760 510 120.