Mise en place d’images dans les pages
Pour placer une image dans une page, entrez l’adresse (url) de cette image dans le texte balisant la page. N’importe quel texte alternatif (utilisé pour les bulles d’aide et les navigateurs n’affichant pas les images) est placé entre guillemets juste derrière l’url de l’image.
http://www.pmichaud.com/img/misc/pc.jpg"Trombones" C'est amu'''sant de travailler a'''vec des trombones. |
 C’est amusant de travailler avec des trombones. |
Les images peuvent être spécifiées en tant que fichiers téléchargés (c’est à dire,Attach:image.jpg) et utiliser les Liens InterMap. N’importe quel fichier terminé par .gif, .jpg, .jpeg, ou .png sera automatiquement traité en tant qu’image. (Voir Notes ci dessous pour les fichiers d’image sans extensions.)
Pour créer un lien sur une image (comme http://www.pmichaud.com/img/misc/pc.jpg par opposition à l’affichage de l’image en lui même), utilisez les doubles crochets bour baliser le lien, comme [[http://www.pmichaud.com/img/misc/pc.jpg]] ou [[Attach:image.jpg]].
Pour que l’image effectue le lien vers une autre adresse, utilisez l’image comme texte de lien comme [[http://www.pmwiki.org | Attach:image.jpg"PmWiki"]].
Légendes et habillage d’images
Une légende peut être ajoutée à l’image en utilisant un trait vertical et le texte de légende.
http://www.pmichaud.com/img/misc/pc.jpg"Trombones" | '''Figure 1''' |
Figure 1 |
Normalement les images sont affichées séquenciellement dans un flot de texte. Pour habiller une image de texte tout en la justifiant à droite ou gauche, utilisez les Styles Wiki suivants : %lfloat% ou %rfloat%.
%lfloat% http://www.pmichaud.com/img/misc/gem.jpg | '''Ta Daaa!''' L'image est justifiée à gauche, et le texte s'écoule sur son côté droit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
 Ta Daaa! L’image est justifiée à gauche, et le texte s’écoule sur son côté droit. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
La balise [[<<]] rompt le flux de texte, et celui-ci continue au bas de l’image.
%lfloat% http://www.pmichaud.com/img/misc/gem.jpg L'image est justifiée à gauche, et le texte s'écoule sur son côté droit. Le texte situé après la balise ''[@[[<<]]@]'' continue en dessous de l'image. [[<<]] Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. |
L’image est justifiée à gauche, et le texte s’écoule sur son côté droit. Le texte situé après la balise |
Utilisez les styles %lframe% ou %rframe% pour habiller une image et placer un cadre autour de celle-ci et de sa légende.
%rframe% http://www.pmichaud.com/img/misc/gem.jpg | '''Ta Daaa!''' L'image est justifiée à droite, et le texte s'écoule sur sa gauche. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Ta Daaa! L’image est justifiée à droite, et le texte s’écoule sur sa gauche. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. |
Utilisez %center% pour centrer une image. Utilisez %right% pour aligner une image à droite, sans habillage.
%center%http://www.pmichaud.com/img/misc/pc.jpg"Paper clips" | C'est amusant de travailler avec des trombones. %right% http://www.pmichaud.com/img/misc/gem.jpg | Ta Daaa! |
C’est amusant de travailler avec des trombones. Ta Daaa! |
Changement de taille des images
Pour changer la taille d’une image, utilisez %width=50px% ou %height=50px% devant l’image. Le style wiki %thumb% est un raccourci utile de %width=100px%.
%width=50px% http://www.pmichaud.com/img/misc/bubble.jpg \ %height=50px% http://www.pmichaud.com/img/misc/bubble.jpg \ %thumb% http://www.pmichaud.com/img/misc/bubble.jpg |
 |
Changer la taille d’une image modifie seulement son affichage dans le navigateur; il ne diminue pas le poids de l’image elle-même durant les transferts.
Les images retaillées avec %thumb% peuvent aussi être habillées d’un cadre, et également être utilisées comme lien.
%lframe thumb% [[http://www.pmichaud.com/img/misc/bubble.jpg | http://www.pmichaud.com/img/misc/bubble.jpg"Souffle sur la bulle"]] | [-Bulle-] %lframe thumb% http://www.pmichaud.com/img/misc/pc.jpg"Accroche le papier" | [-Trombones-] %lframe thumb% [[IndexDocumentation | http://www.pmichaud.com/img/misc/gem.jpg"Visitez l'index de documentation"]] | [[IndexDocumentation | [-Ta Daaa-]]] |
Bulle Trombones |
Notes
- Un fichier d’image sans extension correcte peut être afficher en ajoutant une “fausse” extension via l’Url. Par exemple, si l’adresse url est
http://www.example.com/script/tux, ajoutez lui une fausse “query string” avec l’extension désirée (par ex.,http://www.example.com/script/tux?format=.png).
Voir aussi
- Cookbook:BackgroundImages (en anglais) - Ajout d’image de fond sur les blocs, tableaux et cellules de tableau.
Crédits
Les images de cette page proviennent de http://www.flickr.com et sont redistribuées sous license Creative Commons.
« | PmWiki Fr.Index Documentation | »
