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 amusant de travailler avec des trombones.
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'''
Trombones
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 [[<<]] 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.

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!
Paper clips
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-]]]
Souffle sur la bulle
Bulle
Accroche le papier
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

Crédits

Les images de cette page proviennent de http://www.flickr.com et sont redistribuées sous license Creative Commons.


<< Liens | PmWikiFr.IndexDocumentation | Règles de formatage >>

Ceci est un test

. Traduction de PmWiki.Images Page originale sur PmWikiFr.Images - Références
Dernières modifications:
PmWikiFr.Images: 10 April 2006 à 16h53
PmWiki.Images: 13 September 2013 à 11h30

Changer de thème

La vie du site, les dernières modifications:

Notre local: