Une image qui change d'apparence au passage de la souris...

Tout est dans le titre. Passez la souris sur l'image et vous verrez!

Voici un exemple de code
<p ><a href="http://lignepapilles.canalblog.com/archives/2007/07/27/5768888.html" target="_blank"><img onmouseout="this.src='https://storage.canalblog.com/55/35/446950/26054180_p.jpg'" onmouseover="this.src='https://storage.canalblog.com/71/17/302457/24738528_p.jpg'" src="https://storage.canalblog.com/71/17/302457/24738528_p.jpg" /></a></p>

Si on dépiote le code ça donne :

<p ><a href="adresse vers laquelle on arrive si on clique sur l'image" target="_blank">
<img onmouseout="this.src='adresse de l'image quand la souris n'est pas dessus'" onmouseover="this.src='adresse de l'image quand la souris passe dessus'" src="adresse quand la souris n'est pas dessus" /></a></p>

Vous pouvez coller cela dans vos colonnes pour illustrer les catégories ou encore dans un menu en image sous la bannière de ce genre.

NB : Pour avoir des adresses d'images, il suffit de les télécharger dans un billet normal de cliquer sur le logo html<> et prendre l'adresse affichée. Nul besoin de valider. Un simple copier/coller suffira.

Chouette non?

Ce tuto vous est offert par Pupuce. Merci à elle!

Si vous souhaitez participer et contribuer à Blogtuto en parrainant un tuto, faites un don dès maintenant!

N'oubliez pas en commentaire de laisser l'adresse de votre blog pour que je puisse vous mettre en parrain ou marraine sur le tuto à venir. Merci d'avance!