javascript rollover

Tutoriel Javascript : le rollover

Le terme “rollover” veut dire “rouler dessus”. Il s’agit de modifier une image d’une page web quand le pointeur de la souris passe dessus et de rétablir l’image initiale quand le pointeur de la souris la quitte.

Cette pratique a surtout un but esthétique et convivial. On utilise le rollover dans les menus (mise en surbrillance du menu pointé par la souris, par exemple), dans les boutons sous forme d’image, etc.

Voici donc un code Javascript qui vous permet de créer des rollovers (ce code est gracieusement offert par le site www.jejavascript.net), je me permets seulement de le commenter.

<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/

function objet() {
this.length = objet.arguments.length
for (var i = 0; i < this.length; i++) this[i+1] = objet.arguments[i]
}

var nom = new objet ("imaga.gif", "imagb.gif");
var numero = 1;

function changer() {
numero += 1;
if (numero == nom.length + 1) numero = 1;
document.image.src = "im/"+nom[numero];
}

function initial() {
if (numero != 1) numero = 1;
document.image.src = "im/"+nom[numero];
}

function prechargimg() {
var doc=document;
if(doc.images){ if(!doc.precharg) doc.precharg=new Array();
var i,j=doc.precharg.length,x=prechargimg.arguments; for(i=0; i<x.length; i++)
if (x[i].indexOf("#")!=0){doc.precharg[j]=new Image; doc.precharg[j++].src=x[i];}}
}

//-->
</script>


La balise HTML <BODY> doit contenir un appel à la fonction de « pré-chargement » des images utilisés (la fonction définie « prechargimg » effectue le pré-chargement de l’image passée en paramètre) :

onLoad="prechargimg('im/imagb.gif')"

Voici le code de l’image qui va changer d’aspect à chaque passage de la souris :

<a href="#" onMouseOut="initial()" onMouseOver="changer()"><img src="im/imaga.gif" width="200" height="194" border="0" name="image"></a>

L’évènement “onMouseOut” est l’évènement qui survient quand la souris est en dehors de l’image, dans ce cas, la fonction initial() est appelée (cette fonction affiche l’image initiale).

L’évènement « onMouseOver » survient lorsque la souris passe sur l’image, dans ce cas, la fonction changer() est appelée (cette fonction change l’image initiale).

Dans notre exemple, l’image initiale est « im/imaga.gif » et l’image de « substitution » est « im/imageb.gif » (« im » est le nom du dossier qui contient les images).






 

Recommander ce site à un ami | Accueil Business-Opportunités | Taux de change - conversion de monnaie | S'inscrire & recevoir des cadeaux
Ecrire à l'équipe Business-Opportunités | Rédaction d'article | Faire un lien vers Business-Opportunite.org | Mémoire | Vendre
Faire un lien vers cette page sur votre site | Devenez notre affilié et gagnez de l'argent | Ajouter ce site à vos favoris
Télécharger Firefox | Interviews
| Livres de Christian Godefroy | Corey Rudl | Adobe Reader | Web-business sans site
Créer des fichiers PDF | Ventes en ligne | Référencement payant | Vendre des ebooks | Commerce selon Gary Halbert
Lettre type de vente | autorepondeur | Rentabiliser son site | Vendre des livres | Netprofit | Positionnement | DVD Affiliation | Affaires
Publicité
| Développement personnel | Webmestre | Augmenter son trafic | Création page web | Traitement d'image | Petites annonces
Eboutique | Emailing marketing | Vendre par Internet | Réferencement | Affaire à domicile | PDF vers JPEG | Formulaire HTML
PHP isset | Javascript | Rollover | Popup | MySQL | Plateforme affiliation

© 2006 Business-Opportunite.org