un coup j'te vois...

   Encore un petit truc rigolo et pas compliqué à réaliser : le rollover.
   Le rollover, quoi qu'est-ce ? Un effet qui permet de faire apparaître une image à la place d'une autre au survol de la souris. Comme ça :




   Bon, alors, comment ça marche ce truc-là ? Avec un code à mettre en mode source, évidemment. Tout aussi évidemment, tu auras au préalable, ô valeureux bidouilleur de chtéhèmehèle, préparé tes images (c'est quand-même mieux si elles font exactement la même taille) avant de les héberger...

   Le code de mon rollover à mWa :

<A onmouseover="document.garfield.src='http://idata.over-blog.com/1/17/94/83/bidouilles/garfield-1.jpg'"
                onmouseout="document.garfield.src='http://idata.over-blog.com/1/17/94/83/bidouilles/garfield-2.jpg'"><img title="rollover - garfield" height="109" alt="un peu de patience" src="http://idata.over-blog.com/1/17/94/83/bidouilles/garfield-2.jpg"
                    width="370" border="0" name="garfield"></A>

   Voyons maintenant les éléments à personnaliser.

• 1, le nom de l'image, répété trois fois dans le code.
• 2, l'adresse de l'image de départ (deux occurrences)
• 3, l'adresse de l'image qui apparaît au survol (une occurence)
• 4, le titre de l'image, qui apparaît dans l'info-bulle au survol du roll-over
• 5, le message qui apparaît en cas de non-fonctionnement du bidouillage (utile en cas de bug nouvelle fonctionnalité)
• 6, la hauteur (height) et la largeur (width) de l'image

   Deux petits points de détail : tu as peut-être remarqué, ô visiteur à qui rien n'échappe, que l'effet, s'il marche impec' quand tu balades ta souris verticalement, yoyote quand tu la balades horizontalement. Tu as beau quitter la zone image à gauche ou à droite, c'est toujours l'image "onmouseover" qui apparaît.
   Pourquoi ça yoyote, j'en sais rien. La seule solution que j'ai trouvée, c'est de mettre mon code dans un tableau à une seule cellule...
   Une fois le tableau créé, clic sur html pour, d'une adapter sa largeur (au lieu des 90% par défaut, une valeur légèrement supérieure à la largeur de mon image, ici : 375px) et, de deux, insérer l'ensemble de mon code roll-over entre les balises <td> et </td>. Me voilà donc avec ceci :

<table border="0" width="375">
<tbody>
<tr>
<td><A onmouseover="document.garfield2.src='http://idata.over-blog.com/1/17/94/83/bidouilles/garfield-1.jpg'"
                onmouseout="document.garfield2.src='http://idata.over-blog.com/1/17/94/83/bidouilles/garfield-2.jpg'"><img title="rollover - garfield2" height="109" alt="un peu de patience2" src="http://idata.over-blog.com/1/17/94/83/bidouilles/garfield-2.jpg"
                    width="370" border="0" name="garfield2"></A>
</td>
</tr>
</tbody>
</table>

    Le pourquoi du comment des 2 que j'ai ajoutés au code de départ ? Tout simple : quand il y a deux rollovers différents sur la même page (fussent-ils basés sur les mêmes images, comme ici), il faut les différencier, sinon... marche pô.

    Et le résultat :

   Deuxième point de détail : bien sûr, plus les images seront légères, plus l'effet sera instantané et donc spectaculaire. Par mesure de précaution, il est aussi possible d'ajouter un simple petit code dans la source (en tout début d'article par exemple), qui permettra à l'image utilisée "onmouseover de "précharger" dès l'ouverture de la page et pas seulement quand elle est sollicitée, c'est-à-dire au survol de l'image de départ. Le code en question ? Dans le cas de ce rollover, le voilà :

    <img style="display: none;" src="http://idata.over-blog.com/1/17/94/83/bidouilles/garfield-1.jpg">

    And now, ladies and gentlemen, encore plus fort : un rollover cliquable
    Rien de bien sorcier en fait. Un rollover, ce n'est jamais qu'un élément comme un autre, auquel on peut associer un lien par la fenêtre d'ajout de lien de l'éditeur.
    Juste pour le plaisir, je vous propose quelques pas (ou plus si affinités) dans l'univers d'Ando Hiroshige... clic !