Translation




 

 

 
 
French to English French to German French to Italian French to Spanish
French to Japanese French to Korean French to Russian French to Chinese (Simplified)
 

 

 
 

 

 

 

 

Ombre et lumière

7 janvier 1995 6 07 /01 /janvier /1995 07:30

 

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="http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-02.jpg" onmouseover="tableau1.src='http://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="http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-03.jpg" onmouseover="tableau1.src='http://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="http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-05.jpg" onmouseover="tableau1.src='http://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="http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-29.jpg" onmouseover="tableau1.src='http://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="http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-33.jpg" onmouseover="tableau1.src='http://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="http://idata.over-blog.com/0/23/09/69/chateau/16-17-79-86/17-charente_maritime/pisany/pisany-35.jpg" onmouseover="tableau1.src='http://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="http://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 

 

 

Partager cet article

Repost 0
Published by Le Chevalier Dauphinois - dans ** Mes Widgets
commenter cet article

commentaires

MERLIN 17/05/2015 18:03

Bonjour,
Bravo pour cette belle trouvaille, et pour le partage.
Merci pour le tuto et les astuces, je vais faire des essais.

Le Chevalier Dauphinois 17/05/2015 23:03

* Heureux je suis que cette astuce vous plaise.
* Chacun de mes tutos essaie d'expliquer la succession d'instruction en HTML.
* Ainsi, en tentant de comprendre, le visiteur peut modifier ou adapter suivant son besoin.

boubou 01/05/2015 00:20

Je suis impressionne par la qualité de ton blog
beaucoup de choses me parlent
je ne sais si je vais être capable d'utiliser tes astuces
je vais essayer su mon blog brouillon......
Je vais être un curieux de tes châteaux, j'habite une région
ou il y des vieilles pierres dont tu as déjà parle
Bruniquel dans le 82 où a été tourné le vieux fusil
tu dois avoir ça dans tes relevés.

Le Chevalier Dauphinois 01/05/2015 10:07

* Bien le bonjour
* Durant 8 ans, j'ai été modérateur sur le forum d'aide de Overblog, donc j'ai vu de nombreux Obiens avec un niveau informatique faible.
* J'ai donc créé quelques astuces simples, facilement copiable et adaptable.
* Il ne faut pas être un expert pour les utiliser.
* Un peu de volonté et le blog prend une autre dimension.
* Courage, tu vas réussir !
-------------------------------------------------------------------------
*** Évidemment, j'ai vu et photographié Bruniquel.
*** Ayant visité plus de 3000 sites médiévaux fortifiés, j'ai donc logiquement photographié les constructions les plus médiatiques.
*** Mais durant les 10 premières années de rédaction de ce blog, j'ai décidé de montrer un nombre important de sites peu connus.
*** C'est pour cela que Bruniquel n''apparaît pas encore.
*** Mais d'ici un siècle ou deux, il sera dans mon blog. Promesse de Chevalier !