Overblog Suivre ce blog
Editer l'article Administration Créer mon blog
17 juillet 2011 7 17 /07 /juillet /2011 09:03

 

 


 

Le rollover permet de changer une image, lorsque le curseur de la souris passe au dessus de celle-ci. Inutile de faire un clic pour cela.

 

 

De quoi a-t-on besoin pour faire un Rollover ?

 

Pour faire un rollover, il vous faut donc deux images, avec leur adresse URL.

 

Ensuite inserer les URL obtenus dans le code HTML ci après.

 

 

Code HTML d'un Rollover


Image1 = new Image();
Image1.src = "http://url image 1";
Image2 = new Image();
Image2.src = "http://url image 2";
</script>

<img name="RollImage" style="border : 1px solid #000000" src="http://url image 1" alt="" onMouseOver="document.RollImage.src='http://url image 2'" onMouseOut="document.RollImage.src='http://url image 1'" />

 

 

Code HTML complet de mon Rollover

 

adresse Image 1: http://sd-1.archive-host.com/membres/up/42016049459753927/LogoFaireunBlogreflet.gif

 

adresse Image 2 : http://sd-1.archive-host.com/membres/up/42016049459753927/ToucheMonblogcarre.jpg 

 

Ce qui donne pour mon exemple le code HTML Rollover 

 

 <p><strong><span style="font-family: comic sans ms,sans-serif; font-size: 10pt;"><img src="http://sd-1.archive-host.com/membres/up/42016049459753927/LogoFaireunBlogreflet.gif" name="RollImage" onmouseout="document.RollImage.src='http://sd-1.archive-host.com/membres/up/42016049459753927/LogoFaireunBlogreflet.gif'" onmouseover="document.RollImage.src='http://sd-1.archive-host.com/membres/up/42016049459753927/ToucheMonblogcarre.jpg'" id="RollImage" style="display: block; margin-left: auto; margin-right: auto; border: 0px;" /></span></strong> </p>
<p>&nbsp; </p>

 

Autre personnalisation du code HTML du Rollover

 

J'ai un attribut "border" dans le code d'origine.

Cela signifie que j'ai prévu une bordure autour des images. Si vous voulez la faire apparaître, il suffit d'ajouter une taille autre  que 0px juste après "border" et de modifier l'éventuelle couleur.

Ici, elle sera noire par défaut.

 

 

Articles à relire

Agrandir une photo au clic

Des cadres et montages faciles avec vos photos 

Enregistrer vos images pour votre blog  

 

 

superstickies




 

  * 5 articles a lire pour demarrer votre blog
* Initiation au langage HTML
* Tout pour modifier et embellir vos textes
* Tout savoir sur les images 
* Des jeux
* Des gadgets
* Votre blog ne ressemblera pas aux autres
* Mes astuces
* Référencements et indexations
* Index des articles


 

                                    Rendez-vous sur Hellocoton !                                                        

 

 

 

 

Partager cet article

Repost 0
Published by Aurelie - dans HTML
commenter cet article

commentaires

Eve 27/11/2010 19:00



bonjour ! je ne me rappelle plus comment je suis tombé sur ton blog, probablement en lien sur un autre blog il y  a 2 semaines de cela, mais dès que je suis tombée dessus je l'ai
immédiatement mis dans mes favoris ! Franchement ton blog est vraiment génial, moi qui ne suis pas une quiche en informatique, j'ignorais qu'on pouvait faire tant de choses avec son blog ! J'ai
actuellement un blog, voilà pourquoi je suis interessée par ton blog et toutes ces astuces, malheuresment j'ai confié le soin à la co-gérante de mon blog de changer le mot de passe car cette
année je prépare un concours et ainsi je ne risquais pas de passer mon temps sur le blog. Bref sache que je récupère l'accès à mon blog dès le mois de juiin et je n'attends qu'une seule chose,
pouvoir améliorer mon blog grace à toi ^^


 


Biz !


 


Eve



Ema2100 27/11/2010 14:57



Bonjour ,


excellent article ! ,des conseils web 3.0


précieux ! merci


Bon blog et bonne journée.
Ema2100 / Web3u2free .



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