TITLE=Jouer avec les images
__TOC__

== Images ==
<a href="?m=IM;v=/gwlogo.png"><img alt="img" src="?m=IM;v=/gwlogo.png" /></a>

&lt;a href="?m=IM;v=/gwlogo.png"&gt;
&lt;img alt="img" src="?m=IM;v=/gwlogo.png" /&gt;
&lt;/a&gt;

=== a ===

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

&lt;img alt="img" src="?m=IM;v=/gwlogo.png" width="100" onmouseover="width=200" onmouseout="width=100" /&gt;

<hr/>

<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:nw-resize" onmousedown="width=width*2" onmouseup="width=100"/>

&lt;img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:nw-resize" onmousedown="witdh=width*2" onmouseup="width=100"/&gt;


<hr/>

<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:pointer" onmousedown="width=width*2" onmouseout="width=100"/>

&lt;img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:pointer" onmousedown="width=width*2" onmouseout="width=100" /&gt;

<hr/>

<img src="?m=IM;v=/button_headline.png" onmousedown="src='?m=IM;v=/gwlogo.png'" onmouseout="src='?m=IM;v=/button_headline.png'" />

&lt;img src="?m=IM;v=/button_headline.png" onmousedown="src='?m=IM;v=/gwlogo.png'" onmouseout="src='?m=IM;v=/button_headline.png'" /&gt;

=== b ===
<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="width:100%;background-color:#AAAAAA;" align="right"/>
<a href="?m=IM;v=/gwlogo.png">Lien qui mène à Rome.</a> Ceci est une légende.</div>
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.
<br style="clear:right;"/>

&lt;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' %%%};"&gt;
&lt;img src="?m=IM;v=/gwlogo.png" style="float:right;width:100%;background-color:#AAAAAA;"/&gt;
&lt;a href="?m=IM;v=/gwlogo.png"&gt;Mon lien.&lt;/a&gt; Ma légende.&lt;/div&gt;
Mon texte.
&lt;br style="clear:right;"/&gt;

<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">Lien qui mène à Rome.</a> Ceci est une légende.</div>Le texte situé à coté de l'image.
<br style="clear:left;"/>

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


<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">Lien qui mène à Rome.</a> Ceci est une légende.</div>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.
<br style="clear:left;"/>

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

=== c ===

<table><tr><td>
<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="max-width:300px" onmousemove="width=width+10" onmouseout="width=100"/>
</td><td>
<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="max-width:300px" onmousemove="width=width+10" onmouseout="width=100"/>
</td></tr><tr><td>
<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="max-width:300px" onmousemove="width=width+10" onmouseout="width=100"/>
</td><td>
<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="max-width:300px" onmousemove="width=width+10" onmouseout="width=100"/>
</td></tr></table>

=== d ===

<table><tr><td>
<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:nw-resize" onmousedown="width=width*2" onmouseup="width=100"/>
</td><td>
<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:nw-resize" onmousedown="width=width*2" onmouseup="width=100"/>
</td></tr><tr><td>
<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:nw-resize" onmousedown="width=width*2" onmouseup="width=100"/>
</td><td>
<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:nw-resize" onmousedown="width=width*2" onmouseup="width=100"/>
</td></tr></table>

=== e ===

<table><tr><td>
<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:pointer" onmousedown="width=width*2" onmouseout="width=100"/>
</td><td>
<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:pointer" onmousedown="width=width*2" onmouseout="width=100"/>
</td></tr><tr><td>
<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:pointer" onmousedown="width=width*2" onmouseout="width=100"/>
</td><td>
<img alt="img" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:pointer" onmousedown="width=width*2" onmouseout="width=100"/>
</td></tr></table>

=== f ===

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

&lt;
img alt="img" src="?m=IM;v=/gwlogo.png" width="100" onmouseover="width=200" onmouseout="width=100" /
&gt;

=== g ===

<div style="position:relative;height:150px;">
<img alt="img" title="image1" src="?m=IM;v=/gwlogo.png" width="100" style="display:block;z-index:3;position:absolute;top:0px;left:100px;max-width:400px;background-color:#000AAA;" onmousemove="width=width*1.1;style.left=event.clientX - (width / 2) + 'px';style.zIndex='10'" onmousedown="width=100;style.zIndex='3'"/>
<img alt="img" title="image1" src="?m=IM;v=/gwlogo.png" width="100" style="display:block;z-index:2;position:absolute;top:0px;left:100px;max-width:400px;background-color:#00AAA0;" onmousemove="width=width*1.1;style.left=event.clientX - (width / 2) + 'px';style.zIndex='10'" onmousedown="width=100;style.zIndex='2'"/>
<img alt="img" title="image1" src="?m=IM;v=/gwlogo.png" width="100" style="display:block;z-index:1;position:absolute;top:0px;left:100px;max-width:400px;background-color:#0AAA00;" onmousemove="width=width*1.1;style.left=event.clientX - (width / 2) + 'px';style.zIndex='10'" onmousedown="width=100;style.zIndex='1'"/>
</div>

=== h ===

<img alt="img" title="image" src="?m=IM;v=/gwlogo.png" width="200" style="cursor:pointer;position:absolute;top:50px;left:50px;max-width:200px;background-color:gold;z-index:10;" onmousedown="width=100;style.zIndex='10'" onmousemove="width=width*1.1;style.zIndex='10'"/>
<img alt="img" title="image" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:crosshair;position:absolute;top:75px;left:100px;max-width:400px;background-color:#AA000A;" onmousemove="width=width*1.1;style.left=event.clientX - (width / 2) + 'px';style.top=event.clientY - (height / 2) + 'px';style.zIndex='10'" onmousedown="width=100;style.zIndex='1'"/>
<img alt="img" title="image" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:crosshair;position:absolute;top:75px;left:100px;max-width:400px;background-color:#0AA000;" onmousemove="width=width*1.1;style.left=event.clientX - (width / 2) + 'px';style.top=event.clientY - (height / 2) + 'px';style.zIndex='10'" onmousedown="width=100;style.zIndex='1'"/>
<img alt="img" title="image" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:crosshair;position:absolute;top:75px;left:100px;max-width:400px;background-color:#000AAA;" onmousemove="width=width*1.1;style.left=event.clientX - (width / 2) + 'px';style.top=event.clientY - (height / 2) + 'px';style.zIndex='10'" onmousedown="width=100;style.zIndex='1'"/>
<img alt="img" title="image" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:crosshair;position:absolute;top:75px;left:100px;max-width:400px;background-color:#AAA000;" onmousemove="width=width*1.1;style.left=event.clientX - (width / 2) + 'px';style.top=event.clientY - (height / 2) + 'px';style.zIndex='10'" onmousedown="width=100;style.zIndex='1'"/>
<img alt="img" title="image" src="?m=IM;v=/gwlogo.png" width="100" style="cursor:crosshair;position:absolute;top:75px;left:100px;max-width:400px;background-color:#00AAA0;" onmousemove="width=width*1.1;style.left=event.clientX - (width / 2) + 'px';style.top=event.clientY - (height / 2) + 'px';style.zIndex='10'" onmousedown="width=100;style.zIndex='1'"/>
 