Rollover d'images automatique

Télécharger le projet
Commenter

Description

http://moncastel.9online.fr/rollover/rollover.htm
Liens sur des images qui changent au survol de la souris. Le mécanisme d'inversion est effectué par des événements javascript onmouseover et onmouseout. Les images secondes sont préchargées.

Il faut seulement stocker les images du rollover dans le répertoire "roll", et donner le préfixe "ov_" aux images de remplacement.

Source / Exemple : 


rep = "/roll/" // Répertoire exclusif des images du rollover
pref = "ov_"  // préfixe des images de remplacement.

function initRollover(){
src1=src2=el=0;imageOver=[];D=document
im=D.getElementsByTagName('img');if(!im)return;
for(var i=0; i < im.length; ++i){ //images inverses exclues
  if(im[i].src.indexOf(rep)!=-1 && im[i].src.indexOf(rep+pref)==-1){
  
    // Charge les images de remplacement :
    imageOver[i]=new Image();
    imageOver[i].src=im[i].src.replace(rep,rep+pref)
    }
 }
 addEvent(D,"mouseover",chg_img) 
 addEvent(D,"mouseout",retabli_img) 
}

function chg_img(e){
el=window.Event?e.target:event.srcElement;
if(el.tagName=="IMG" && el.src.indexOf(rep)!=-1 && el.src.indexOf(rep+pref)==-1){ //image à inverser?
  src1=el.src;el.src=el.src.replace(rep,rep+pref)
  }
}

function retabli_img(){if(src1)el.src=src1;src1=0}

function addEvent(obj,evType,fn,capt){ // ajoute un événement sans écraser l'éxistant.
if(obj.addEventListener){obj.addEventListener(evType,fn,capt);return true;} // NS6+
else if(obj.attachEvent)obj.attachEvent("on"+evType,fn) // IE 5+
else {return false;}
} 

// initialisation 
addEvent(window,"load",initRollover)

Conclusion :


Prévoir des images légères, bien compressées
Télécharger le projet

Codes Sources

A voir également

S'inscrire maintenant

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.

Du même auteur (chimelpremier)