Rollover d'images automatique

Soyez le premier à donner votre avis sur cette source.

Vue 17 171 fois - Téléchargée 1 301 fois

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

Ajouter un commentaire Commentaires
cs_jjdagadir Messages postés 127 Date d'inscription lundi 7 avril 2003 Statut Membre Dernière intervention 6 mars 2009
22 janv. 2005 à 12:00
c'est du boulot de codage propre, bien expliqué, joli à voir, çà vaut bien 9.
De plus codé en xhtml, ce qui est beaucoup trop rare.
Donc bravo CHimelpremier.
Kenavo.
franck83300 Messages postés 1 Date d'inscription mercredi 16 mars 2005 Statut Membre Dernière intervention 16 mars 2005
16 mars 2005 à 22:22
Bonjours, comment connait on les cotes "width" et "heigh" pour placer les images, car dans mon cas il s'agit d'une carte géographique et chaque pays constitue le puzzle.
Merci !
chimelpremier Messages postés 544 Date d'inscription vendredi 5 décembre 2003 Statut Membre Dernière intervention 20 mai 2005
17 mars 2005 à 01:44
Il n'y a que le scr de l'image qui change. L'image de remplacement restera aux mêmes dimensions que celle survolée. Sinon il faut modifier le script et ajouter par éxemple :
this.firstChild.style.height=100+'px' pour déterminer la hauteur de l'image, à placer dans la fonction chang_im() ou l'autre.
ajja93 Messages postés 6 Date d'inscription vendredi 13 mai 2005 Statut Membre Dernière intervention 14 mai 2005
13 mai 2005 à 15:08
Peut-être est-il efficace si TOUT est dans le même dossier, SINON ... c'est la "cagaille" totale.
Voir pour preuve mon test
http://www.amour-tendresse.com/pages/script_roll.php
et ce qui se passe pour les images NON-rollover, pourtant situées dans d'autres dossiers :-(
Bien-bien bogué, le script, dommage !
chimelpremier Messages postés 544 Date d'inscription vendredi 5 décembre 2003 Statut Membre Dernière intervention 20 mai 2005
13 mai 2005 à 15:57
Bonjour,
Il faut modifier la première ligne du script :

rep = "../Images/roll/" // répertoire des images.

Peut-tu confirmer si ça marche, tu est le premier qui l'utilise à ma connaissance, merci.
Cordialement
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)