Affichage Photo par survol

ACCUEIL

Menu Gifs

truc et astuce

< précédant

suivant >

Affichage de vos photos
Passez  votre sourie sur les petites photos

exemple largeur 480 px:

Explications pour affichage de 7 photos

Voila le code HTML (remplacez les adresses des photos en gras, par les adresses de vos photos) puis copier ce code dans vos articles en mode HTML ( bien respecter les guillemets et les apostrophes)

<br /> <br /> <br />
<table style="border: 2px solid #c62e53; width: 480px; background-color: #ffffff3; text-align: center;" border="2" align="center">
<tbody>
<tr style="text-align: center;">
<td  colspan="7" ><img src="http://adresse photo1.jpg" style="width: 480px;" id="GDphoto" name="GDphoto" /></td>
</tr>
<tr style="text-align: center;">
<td ><img src="http://adresse photo1.jpg" onmouseover="GDphoto.src='http://adresse photo1.jpg'" style="width: 63px;" /></td>
<td ><img src="http://adresse photo2.jpg" onmouseover="GDphoto.src='http://adresse photo2.jpg'" style="width: 63px;" /></td>
<td ><img src="http://adresse photo3.jpg" onmouseover="GDphoto.src='http://adresse photo3.jpg'" style="width: 63px;" /></td>
<td ><img src="http://adresse photo4.jpg" onmouseover="GDphoto.src='http://adresse photo4.jpg'" style="width: 63px;" /></td>
<td ><img src="http://adresse photo5.jpg" onmouseover="GDphoto.src='http://adresse photo5.jpg'" style="width: 63px;" /></td>
<td ><img src="http://adresse photo6.jpg" onmouseover="GDphoto.src='http://adresse photo6.jpg'" style="width: 63px;" /></td>
<td ><img src="http://adresse photo7.jpg" onmouseover="GDphoto.src='http://adresse photo7.jpg'" style="width: 63px;" /></td>
</tr>
</tbody>
</table>

Code en détail

 <br /> <br /> <br />

 trois saut de lignes

<table style="border: 2px solid #c62e53; width: 480px; background-color: #ffffff3; text-align: center;" border="2" align="center">

Bordure de 2 px code de la couleur couleur diu fond du tableau

<tr style="text-align: center;">
<td  colspan="7" ><img src="http://adresse photo1.jpg" style="width: 480px;" id="GDphoto" name="GDphoto" /></td>
</tr>

Représente la ligne de la grande photo remplacez  http://adresse photo1.jpg par l'adresse de votre première image

<td ><img src="http://adresse photo7.jpg" onmouseover="GDphoto.src='http://adresse photo7.jpg'" style="width: 63px;" /></td>

Représente une des petite photo remplacez  http://adresse photo1.jpg par l'adresse de vos  images
cette ligne est à faire sept fois une par photo

Besoin d'aide pour d'autres formes ou d'autres tailles d'affichage contactez moi

< précédant

suivant >