Avant tout, j'aimerais remercier Gifman pour cette astuce qu'il a développée.
Je n'ai fait que la mettre en forme pour mon besoin.
Allez voir son blog passionnant --> clic
--------------------------------------------------------
Le but est d'afficher une image au centre d'un tableau en mettant simplement le curseur sur une des 6 images mignatures.
Une image valant mieux qu'un long discours, amusez vous avec ceci :
1 | 2 | 3 | 4 | 5 | 6 |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
Cette astuce n'est réalisée qu'en html.
Elle est facile à comprendre.
Elle est possible sur tous les blogs.
Voici le code..... Ne paniquez pas, il est symétrique.
<p> </p>
<table style="border: 2px solid #999; width: 640px; background-color: #ffffff3; text-align: center;" border="2" align="center">
<tbody>
<tr style="text-align: center;">
<td>
1
</td>
<td>
2
</td>
<td>
3
</td>
<td>
4
</td>
<td>
5
</td>
<td>
6
</td>
</tr>
<tr style="text-align: center;">
<td>
<img src="https://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-02.jpg" onmouseover="tableau1.src='https://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-02.jpg'" style="width: 98px;" />
</td>
<td>
<img src="https://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-03.jpg" onmouseover="tableau1.src='https://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-03.jpg'" style="width: 98px;" />
</td>
<td>
<img src="https://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-05.jpg" onmouseover="tableau1.src='https://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-05.jpg'" style="width: 98px;" />
</td>
<td>
<img src="https://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-29.jpg" onmouseover="tableau1.src='https://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-29.jpg'" style="width: 98px;" />
</td>
<td>
<img src="https://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-33.jpg" onmouseover="tableau1.src='https://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-33.jpg'" style="width: 98px;" />
</td>
<td>
<img src="https://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-35.jpg" onmouseover="tableau1.src='https://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-35.jpg'" style="width: 98px;" />
</td>
</tr>
<tr style="text-align: center;">
<td colspan="6">
<img src="https://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-02.jpg" style="width: 640px;" id="tableau1" name="tableau1" />
</td>
</tr>
</tbody>
</table>
<p> </p>
Explication de cette astuce :
* Le texte en JAUNE-ITALIQUE correspond à la ligne de chiffre.
--> Il me permet de commenter mes images.
---> Vous pouvez supprimer tout ce jaune si vous n'en voulez pas.
* Chaque texte en ROUGE-GRAS correspond à l'adresse d'une image.
--> Il est important entre chaque <td> (chaque bloc) d'inscrire 2 fois la même adresse..
--> Certains d'entre vous ont peut être reconnu le principe du Rollover.
--> Si vous n'avez pas reconnu le Rollover, cela n'a aucune importance.
* Le texte en ROUGE-GRAS-SOULIGNE est l'adresse de l'image qui apparaît au début.
--> Vous pouvez mettre l'une des 6 adresses, cela n'a pas d'importance.
--> Par habitude, je mets la même que la 1ère.
* Le chiffre en ROSE est la taille de chacune des 6 petites images. J'ai mis 98px.
--> Ne changez pas ce chiffre pour l'instant. Je vous explique ci-dessous comment faire.
* Le chiffre en ROSE-GRAS est la taille du tableau. Je l'ai définie en 640px
--> Important : Cette dimension du tableau est inscrite à 2 endroits.
--> Astuce :
** Vous pouvez avoir un tableau plus petit ... Par exemple : 520px
** Il faudra donc changer ce chiffre à 2 endroits.
** Mais surtout redéfinir par programme la taille des petites images.
** C'est facile...... 640 - 520 = 120 pixels en moins.
** Comme il y a 6 cellules, il suffit de diviser ce chiffre : 120 / 6 = 20 pixels en moins pour chaque miniature.
** Donc, chaque petite image sera plus petite de 20 pixels.
** Le chiffre en ROSE devient : 98 - 20 = 78
** Il suffit de remplacer à 6 endroits la taille de la vignette.
** Vous constatez que cette astuce est simple à comprendre.
==> Super astuce (pour ceux qui ont compris le raisonnement ci-dessus) :
*** Il est possible de mettre plus que 6 images.. Par exemple 10.
*** Pour cela il suffit de changer le : <td colspan="6">
*** Il faut remplacer 6 par 10.
*** Puis refaire le calcul ci-dessus en divisant par 10 et non pas par 6.
* tableau1 est le nom de ce tableau.
--> Ceux qui ont reconnu le rollover comprennent la détermination d'un nom.
--> Si vous n'avez pas reconnu le Rollover, cela n'a aucune importance.
--> Astuce :
** Si, dans le même article, vous souhaitez mettre un autre tableau..... C'est facile :
** Il suffit de nommer le 2ème autrement : Par exemple tableau2
** Ceci est à faire 8 fois dans mon exemple.
** Vous constatez que cette astuce est simple à comprendre.
* Pour la décoration et les couleurs des bordures, c'est un classique tableau.
<table style="border: 2px solid #999; width: 640px; background-color: #ffffff3; text-align: center;" border="2" align="center">
--> Les "experts" peuvent le modifier dans le html.
--> Pour les autres, il suffit de cliquer sur l'icône "tableau"..... Et de faire les classiques réglages.
* -* Lorsque vous aurez compris cette astuce, les possibilités sont "infinies".
* - * Mon ami Gifman a fait une variante ici.
* - * Plus modestement, j'ai créé celle-ci.
Conseil final :
* Pour cette astuce, il est préférable (et fortement recommandé) d'avoir les images de taille identique.
* Évitez de mélanger les vues verticales et horizontales sur la même ligne.
* Sinon, la ligne de vignettes sera asymétrique.
* Et l'image agrandie fera sauter le tableau.
* Il est possible de gérer les dimensions vignettes/tableau.... Mais je le déconseille aux débutants.
==================================
Faites des essaies.... Ce script est facile à comprendre avec un peu de patience.
Limitation
Aucune. Ce code ne contient pas de Javascript. Il suffit de le coller dans un article de votre blog dans le mode html.
![]() |
Retour menu Widget |