Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
1 juillet 2013 1 01 /07 /juillet /2013 15:58


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'"

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

 


 

                                             Rendez-vous sur Hellocoton !

Partager cet article

Repost 0
Published by Aurelie - dans Les images
commenter cet article

commentaires

stress balls 23/04/2014 13:28

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 23/10/2010 11:15



Merci pour ce truc génial !


LE CHEMIN DU BONHEUR



Tiamat 20/10/2010 15:18



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 20/10/2010 16:53



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 22/02/2010 17:10


Magnifique decouverte!
Bises clic


ENINA77 22/02/2010 09:44


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


Naima 22/02/2010 00:16


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


Aurelie 22/02/2010 16:29


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


ratiba 21/02/2010 20:21


merci pour l'info bisou$$


JANY 21/02/2010 19:42


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


Valérie 21/02/2010 17:15


Un petit passage du dimanche !! bizes €


Noémie 21/02/2010 15:07


Visit€ du dimanch€ toujours util€ !


Présentation

  • : Faire un blog
  • Faire un blog
  • : Ce blog vous aide à vous lancer pour faire votre blog : plateforme, mise en page, décoration, gadgets...
  • Contact

Vous Cherchez Quoi ?

Bienvenue !

 

PancarteSmiliz.pngCe blog a pour objet de vous aider à faire votre blog. C'est facile, et possible sans être informaticien !

J'ai 2 autres blogs très différents, et je souhaite mettre mon expérience à votre service. N'hésitez pas à me déposer vos commentaires et questioxxns. 
Si vous débutez, commencez par l' Index des articles , rubrique "Pour bien démarrer". 

 

Inscrivez votre site sur ma Top Liste et améliorez votre référencement.  

Mon logo sur votre site

Si j'ai contribué à l'amélioration de votre blog, merci d'y mettre mon logo :
Site Faire Un Blog

Code à coller :

<a href="http://faireunblog.over-blog.com/" target="_blank"><img height="65" width="85" src="http://sd-1.archive-host.com/membres/up/42016049459753927/PancarteSmiliz.png" alt="Site Faire Un Blog" /></a>

 

 

Date du jour

 

 

 

Géolocalisation

formation