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  

* 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