Jouer avec les images
| Podsumowanie |
<a href="?m=IM;v=/gwlogo.png"> <img alt="img" src="?m=IM;v=/gwlogo.png" /> </a>
a
<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" onmouseover="width=200" onmouseout="width=100" />
<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:nw-resize" onmousedown="witdh=width*2" onmouseup="width=100"/>
<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:pointer" onmousedown="width=width*2" onmouseout="width=100" />
<img src="?m=IM;v=/button_headline.png" onmousedown="src='?m=IM;v=/gwlogo.png'" onmouseout="src='?m=IM;v=/button_headline.png'" />
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" / >
g
h