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

Difficile

Taille invariable

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 :

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.

Échelle indicative de taille des images avec un paramètre invariable en pixels

Pixels (px)	Image en largeur	Image en hauteur
20px
50px
100px
150px
vignette 220px par défaut, ou selon vos préférences. À partir de là n'utilisez ce paramètre que pour les images illisibles en dessous d'une taille minimum, comme les schémas avec texte.	Image encadrée « thumb », c'est 220px par défaut.	Image encadrée « thumb », c'est 220px par défaut.
300px

Galeries : Options d'usage plus rare

Autres paramètres éventuels

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
• 
  Example.jpg
• 
  Wikipedia svg logo-fr.svg Une légende personnalisée ajoutée au nom du fichier

Images cliquables : <imagemap>

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

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
<imagemap> Fichier:Cognac france map-fr.svg|150px|Carte des cognacs default [[Cognac (eau-de-vie)]] desc bottom-right </imagemap>	Carte des cognacs
Ici, un clic sur n’importe quel endroit de la carte mène à Cognac (eau-de-vie).

Plusieurs liens

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) ou none (aucune description).

• Voici un exemple :

Syntaxe	Rendu
<imagemap> Fichier:Cognac france map-fr.svg|300px|Carte des cognacs rect 500 30 30 300 [[La Rochelle]] circle 700 550 100 [[Angoulême]] circle 499 425 50 [[Cognac (Charente)]] desc bottom-right </imagemap>	Carte des cognacs

Trouver les coordonnées pour imagemap

Zone circulaire : 1 = 760 pixels, 2 = 510 pixels, 3 = 120 pixels.

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.