Rollover d'images automatique

Soyez le premier à donner votre avis sur cette source.

Vue 16 928 fois - Téléchargée 1 284 fois

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

Codes Sources

A voir également

Ajouter un commentaire Commentaires
Messages postés
1
Date d'inscription
jeudi 29 avril 2010
Statut
Membre
Dernière intervention
5 mai 2010

Bonjour! Merci pour ce code très pratique et sympathique! Un petit souci, je n'arrive pas du tout á le faire fonctionner sur IE. La DebugBar IE parle d'une erreur de script:
Ligne: 21
Caractère: 1
Code: 0
Message d'erreur: 'el.TagName' ist Null oder kein Objekt

Je vous remercie par avance si vous saviez de quoi il retourne! Peut-être une mauvaise manip' de ma part?
Marie
Messages postés
1
Date d'inscription
jeudi 19 août 2010
Statut
Membre
Dernière intervention
26 février 2010

Bonjour je viens de copier le code dois l'ecrire ou je peux faire un copier colle et je change le nom des images
ps ou dois le mettre dans les codes sur cs4?
si j"ai bien compris il faut ceer un repertoit rollover? ou non?'( y mettre les images)
et la 2 images je peux lui donner un lien?
exemple image1 sur ma page d'accueil le sphyns donc image1, puis image2 les pyramides avec le lien sur egypte.html.
puis au lachée de la souris l'image 1 doit revenir non?
par avance merci en esperant avoir des infos.
Daniel81
Messages postés
3
Date d'inscription
jeudi 5 janvier 2006
Statut
Membre
Dernière intervention
4 juin 2007

Salut, je rencontre un problème avec ce script :

je l'utilise sur des images placées près d'une iframe, et quand la souris quitte l'image vers l'iframe, c'est le src de l'iframe qui est remplacé, et non le src de l'image comme ce devrait être le cas...

Quelqu'un a-t'il une solution au problème ? je ne peux malheureusement pas éloigner trop l'iframe :(
Messages postés
6
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
14 mai 2005

J'oubliais :
1) ton script n'empêche pas ma page de rester XHTML transitional (indispensable)

2) bien évidemment, si j'utilise ton script dans mon site (après test sous différents navigateurs),je mettrai un petit lien vers ton site dans ma page http://www.amour-tendresse.com/pages/surleweb.php
Messages postés
6
Date d'inscription
vendredi 13 mai 2005
Statut
Membre
Dernière intervention
14 mai 2005

Re-bravo chimelpremier-qui-mérite-bien-son-numéro-UN !

Effectivement, tout semble fort bien fonctionner (page de test toujours en ligne, à la même adresse) par ce petit ajout - pour lequel tu as passé la nuit :-))) apparemment

Deux remarques importantes :
1) il faut laisser rep = "roll/" tel quel (tout début du script) !
En effet, si je corrige par le chemin des images (dans mon cas ../Images/roll/), le rollover ne fonctionne plus !
Ceci m'arrange beaucoup, car dans ce cas je n'aurai QU'UN script même pour quelques pages dans un sous-dossier :-)

2) si une image est en "over" (si le rollover représente un lien, cela veut dire que le lien est nul puisque l'on vient de cliquer dessus), IL NE FAUT PAS UTILISER l'image à préfixe "ov_" du dossier "roll", MAIS une image IDENTIQUE située DANSUN AUTRE DOSSIER !

Pour être plus clair, dans le menu de ma page de test, on voit que l'on est (ou plutôt "on serait" si ce n'était pas une page de test) sur la page "Livre d'Or" puisque le bouton "livre d'or" est en couleur bleue (cliqué, donc)
Cette image n'est pas de chemin ../Images/roll/ MAIS de chemin ../Images/menu/

Bon, merci pour ton travail, je vais tester ce samedi sur une page plus riche en images "statiques" et plus riche également en images rollover.

Je t'envoie un petit mot si tout va bien, et dans ce cas ton script sera utilisé dans TOUT mon site (40 000 visiteurs/mois dans le monde dont 20 % aux U.S.) !
Afficher les 14 commentaires

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.