Image changeante au survol de la souris

Certains sites ont des "images cachées" : elles apparaissent uniquement quand la souris passe au dessus.

Je vais vous montrer que c'est très facile à faire.


1. Démonstration :

Regardez déjà l'exemple en passant votre souris sur cette photo (inutile de cliquer) :




2. Code HTML :

Vous savez déjà comment insérer en HTML une photo dans un article.

Si ce n'est pas le cas, lisez d'abord cet article :
http://faireunblog.over-blog.com/article-mettre-une-image-dans-vos-articles-39107713.html

Pour changer l'image au survol de la souris, il faut simplement ajouter ceci au code de votre image :

onmouseover="javascript:this.src='url_de_l'autre_image'"
onmouseout="javascript:this.src='url_de_cette_image'"

où url_de_l'autre_image est l'adresse de l'image qui doit apparaitre quand la souris passe au dessus
et  url_de_l'autre_image est l'adresse de l'image "d'origine", qui est affichée.


3. Pour mon exemple: le code complet est donc :

<img height="225" width="300"
src="http://idata.over-blog.com/2/07/78/33/Mes-photos/Mes-photos_0812_800x600.jpg" onmouseout="javascript:this.src='http://idata.over-blog.com/2/07/78/33/Mes-photos/Mes-photos_0812_800x600.jpg'"
onmouseover="javascript:this.src='http://idata.over-blog.com/2/07/78/33/Mes-photos/Mes-photos_0929_800x600.jpg'" class="CtreTexte" />


Nota : Ce code fonctionne également si on est en mode "confiance" dans Overblog

 

---

Comments

[stress balls]

very informative and impressive share you have made here for the users like me to collect necessary information on site and apprentice design. Changing image mouseover is a good share and i wish to be here again for more. good luck!

[DE CHAT EN CHAT]

Merci pour ce truc génial !


LE CHEMIN DU BONHEUR

[Tiamat]

parce que ton blog est très pratique je t'ai épinglée et taguée sur mon blog, va voir comment ça se passe si tu veux ...

Bizzz

[Aurelie]

Merci beaucoup à toi, je suis allée voir et ai déposé un com. par contre, j'ai pour principe de ne pas faire ou entrer dans ce qu'on appelle des chaines ! Bises

[mounia]

Magnifique decouverte!
Bises clic

[ENINA77]

Intéressant comme tous tes tuyaux !
et clic€ pour te remercier
@+++

[Naima]

Merci pour tt ces infos, avec plaisir d e decouvrir ton blog, bonne continuation et bi$

[Aurelie]

Merci a toi pour le compliemnt et reviens vite! Bonne journée

[ratiba]

merci pour l'info bisou$$

[JANY]

en ce dimanche excellente soirée ! bises et clic $ !
Jany.

[Valérie]

Un petit passage du dimanche !! bizes €

[Noémie]

Visit€ du dimanch€ toujours util€ !