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>&nbsp;</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>&nbsp;</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