Jouer avec les images

Summary

1 - Images
- 1.1 - a
- 1.2 - b
- 1.3 - c
- 1.4 - d
- 1.5 - e
- 1.6 - f
- 1.7 - g
- 1.8 - h

Images

a

b

Lien qui mène à Rome. Ceci est une légende. Lorsque l'on clique sur l'image, elle s'agrandit et la légende s'affiche. Un nouveau clic sur l'image et la voilà revenue à sa position initiale. L'image se trouve à droite du texte à cause de l'option style="float:right". Pour interrompre le flux, penser à ajouter un br style="clear:right;" ! On peut aussi utiliser des tableaux pour placer le div où l'on veut.

<div style="float:right;width:100px;font-size:0px;padding:5px;margin:5px;background-color:#FFFFFF;cursor:pointer;text-align:center;" onmouseup="if(style.width == '100px') %%{style.width='400px';style.fontSize='20px'%%} else %%{style.width='100px';style.fontSize='0px' %%};"> <img src="?m=IM;v=/gwlogo.png" style="float:right;width:100%;background-color:#AAAAAA;"/> <a href="?m=IM;v=/gwlogo.png">Mon lien.</a> Ma légende.</div> Mon texte. <br style="clear:right;"/>

Lien qui mène à Rome. Ceci est une légende.Le texte situé à coté de l'image.

<div style="float:left;width:300px;padding:5px;margin:5px;background-color:#FFFFFF;text-align:center;"> <img src="?m=IM;v=/gwlogo.png" style="width:100%;background-color:#AAAAAA;"/> <a href="?m=IM;v=/gwlogo.png">Mon lien.</a> Ma légende.</div>Mon texte. <br style="clear:left;"/>

Lien qui mène à Rome. Ceci est une légende.La même image sans couleur d'arrière plan, pour garder la transparence si elle existe. Les marges intérieures et extérieures sont de 10px au lieu de 5px.

<div style="float:left;width:300px;padding:10px;margin:10px;background-color:#FFFFFF;text-align:center;"> <img src="?m=IM;v=/gwlogo.png" style="width:100%;"/> <a href="?m=IM;v=/gwlogo.png">Mon lien.</a> Ma légende.</div>Mon texte. <br style="clear:left;"/>

c

d

e

f

< img alt="img" src="?m=IM;v=/gwlogo.png" width="100" onmouseover="width=200" onmouseout="width=100" / >