Affichage Photo par survol avec sa description

ACCUEIL

Menu Gifs

truc et astuce

< précédant

suivant >

Affichage de vos photos avec une description sur les petites photo

une demande de Catcent
Passez  votre souris sur les petites photos

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" title " ici votre description "onmouseover="GDphoto.src='http://adresse photo1.jpg'" style="width: 63px;" /></td>
<td ><img src="http://adresse photo2.jpg" title " ici votre description "onmouseover="GDphoto.src='http://adresse photo2.jpg'" style="width: 63px;" /></td>
<td ><img src="http://adresse photo3.jpg" title " ici votre description "onmouseover="GDphoto.src='http://adresse photo3.jpg'" style="width: 63px;" /></td>
<td ><img src="http://adresse photo4.jpg" title " ici votre description "onmouseover="GDphoto.src='http://adresse photo4.jpg'" style="width: 63px;" /></td>
<td ><img src="http://adresse photo5.jpg" title " ici votre description "onmouseover="GDphoto.src='http://adresse photo5.jpg'" style="width: 63px;" /></td>
<td ><img src="http://adresse photo6.jpg" title " ici votre description "onmouseover="GDphoto.src='http://adresse photo6.jpg'" style="width: 63px;" /></td>
<td ><img src="http://adresse photo7.jpg" title " ici votre description " 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" title " ici votre description "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 et title " ici votre description " par la description concernant la photo
cette ligne est à faire sept fois une par photo

Ma création page suivante

< précédant

suivant >

Comments

[petitesirene04]

bonne nuit bambino va vite dans ton lit et fais de beaux reves bizzzzzzzzzzzz

[GIFman]

meric bien je vais attendre le marchand de sable


bizzzz

[petitesirene04]

ben alors tout va bien bonne soirée moi je vais bientot aller me coucher me suis levee tres tot se matin
bizzzz

[GIFman]

allez je me préparer à me coucher et quitter le canapé


bonne nuit


bizzzzz

[petitesirene04]

chuuuuuttttttttthe oui tout a une fin mais c'est vrai que rester au soleil et ensuite rentré au froid ca doit
lui mettre le moral a zerobizzzzzz

[GIFman]

non je l'ai eu au télèphone et tout allait bien


bonne soirée

[petitesirene04]

les yeu c'est impportant la vue c'est la vie, j'ai vue que ta maman est rentrée de vacance et elle a pas de bol la pauvre fait pas beau sniffffffffffffff


bonne soirée bizzzz

[GIFman]

et oui elle est rentrée ( tout à une fin   )  mais bientôt je les fait descendre me voir dans le sud mais chut
.....


bonne soirée


Bizzzz

[petitesirene04]

pas de bol j'ai des lunettes depuis que je suis petite bizzzz

[GIFman]

moi aussi mais je suis resté longtemps sans hélas le temps à fait son oeuvre


bizz