Nouveau

Plus de 24 570 Gifs et

1908 Lignes de séparation

 

 

 

n'oubliez pas de citer ce blog en retour

Compteur

Info du Blog

Pour faire un  lien de mon blog

( avec une image )

    
ou
 
 

Rejoindre ma communauté ?

Cliquez ci contre
  Gifs et compagnie
1 février 2010 1 01 /02 /février /2010 13:20

 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 >

 

Partager cet article

Repost 0
Published by GIFman - dans Trucs-et-Astuces
commenter cet article

commentaires

D@net 18/12/2013 11:26


Bonjour,


C'est très gentil cette petite visite, à mon tour, je te souhaite d'excellentes fêtes de fin d'année.


Amicalement.


D@net.

GIFman 18/12/2013 12:38



bonjour et merci bien


bonne fêtes


à bientôt



Le Chevalier Dauphinois 19/01/2013 13:58


Bien le bonjour messire le Gifman


  Le Chevalier étant très occupé ces temps ci, point je vous ai souhaité une année nouvelle agréable...


  Ayant essayé cette astuce sur un smartphone, je viens t'en faire le bilan.


* Si l'article est en mode smartphone, le tableau disparaît et l'écran montre l'une en dessous toutes les images... Donc, l'astuce est inhibée... moi qui avais numéroté les cases je vois une
ligne de chiffres sans lien avec les images. ... mais les images ont la taille de l'écran.... Évidemment en mode
vertical ou horizontal, cela agrandit l'image.


* Mais si le smartphone est configurer comme si l'écran était celui d'un pc, le tableau apparait correctement (certes les vignettes sont petites puisque l'écran est petit (incroyable logique
n'est il pas ?)


  Avec un doigt, l'appui sur une vignette fait changer la grande image comme si cela était un curseur de souris... Donc cela fonctionne.


--> Test effectué sur un Sony Xperia, donc Android.... Point d'ami ayant un Apple je connais.


 

GIFman 19/01/2013 19:40



Bonjour messire chevalier


et merci pour ton test , car point de smartphone dans mon humble demeure


mais cela ne devrait pas tarder


passe un bon week-end , je profite également pour te souhaiter une excellente année



Le Chevalier Dauphinois 08/12/2012 10:30


Grâce à ton merveilleux article, j'ai pu faire la description de cette modeste maison forte. Pour cette construction dont il ne reste rien de fascinant (donc, il n'est
point facile de la décrire), je souhaitais dynamiser un peu l'article par une présentation différente.


  Ton astuce m'a donné une autre idée. Je vais prochainement l'appliquer, en petites images dessus-dessous, pour un château troglodytique où il n'y a qu'images à montrer (il n'a eut
aucun historique et la description semble futile).


Merci messire Gifman

GIFman 10/12/2012 07:20



Bonjourchevalier


je vais allez voir cela de plus près


et quand tu aura fait ton autre modèle n'oubli pas de me sonner


à bientôt



Le Chevalier Dauphinois 07/12/2012 14:45


* Merci messire Gifman pour cette astuce. Je l'ai un peu modifiée (un simple décallage).


* Comme je retaille mes images en fonction du sujet, elles n'ont pas toujours la même hauteur.....Conséquence, le curseur de la souris n'est plus en alignement puisque l'ensemble du tableau monte
ou descend.


* J'ai donc mis la grande image (le 1er tr) en bas, ainsi la ligne des petites images est toujours alignée.


* Mais c'est bien toi qui a fait les 99,99% du travail... Hommage je te rends.


 

GIFman 07/12/2012 21:55



Bonjour messire chevalier


dis moi ou tu as mis ta fabuleuse création


bonne soirée et bon week end



michelle 04/04/2012 14:16


Bonne journée à toi ! Et joyeuses Pâques :0014:

GIFman 04/04/2012 18:42



Bonjour et merci


joyeuse pâque également


bonne journée


à bientôt