Vous ne trouvez pas de réponse à votre problème ? Alors posez la question dans le forum. Souvenez-vous qu'il n'y a jamais de question bête, mais rester dans l'ignorance parce que l'on n'ose pas poser une question, ça c'est une erreur !

ROLLOVER D'IMAGES AUTOMATIQUE


Information sur la source

Catégorie :Effets Niveau : Débutant Date de création : 21/01/2005 Date de mise à jour : 18/05/2005 12:51:14 Vu / téléchargé: 10 834 / 853

Note :
9 / 10 - par 2 personnes
9,00 / 10

  • 1

  • 2

  • 3

  • 4

  • 5

  • 6

  • 7

  • 8

  • 9

  • 10

Commentaire sur cette source (12)
Ajouter un commentaire et/ou une note

Description

Cliquez pour voir la capture en taille normale
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

  • 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)
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
 

Fichier Zip

Pour les "Membres Club", vous pouvez télécharger directement un fichier contenu dans le zip sans télécharger le zip en entier !

Télécharger le zip

Historique

21 janvier 2005 00:16:22 :
URL ajoutée.
03 février 2005 01:32:50 :
simplification : plus besoin de onload ... dans la balise body
24 mars 2005 13:37:49 :
remanié pour être encore plus compatible(IE5.0) Variables au début du script pour choisir : rep : le répertoires des images inverssables pref : préfixe des images secondes
24 mars 2005 13:43:24 :
ajouté la capture d'écran
14 mai 2005 02:21:30 :
correction d'un bug signalé par ajja 93
14 mai 2005 02:29:26 :
zip mis à jour
15 mai 2005 15:03:41 :
rollover actif sur images avec liens seulement ajouté une version CSS à améliorer
18 mai 2005 00:52:36 :
Page d'explication finiolée, script allégé
18 mai 2005 12:51:14 :
petite correction d'erreurs suite à la dernière modif

Commentaires et avis

signaler à un administrateur
Commentaire de jjdagadir le 22/01/2005 12:00:45

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.

signaler à un administrateur
Commentaire de franck83300 le 16/03/2005 22:22:31

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 !

signaler à un administrateur
Commentaire de chimelpremier le 17/03/2005 01:44:08

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.

signaler à un administrateur
Commentaire de ajja93 le 13/05/2005 15:08:37

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 !

signaler à un administrateur
Commentaire de chimelpremier le 13/05/2005 15:57:04

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

signaler à un administrateur
Commentaire de ajja93 le 13/05/2005 16:51:06

Bravo pour la réactivité ! Chapeau !

Non, c'est encore pire, je perds mes rollover comme tu peux le voir même adresse.
PS= tu peux me contacter directement par mon site, ce site obligeant les cookies sans le dire, contrairement aux recommandations de la CNIL.

signaler à un administrateur
Commentaire de ajja93 le 13/05/2005 17:29:58

Note complémentaire : en changeant "../Images/roll/" par l'url (http://.....), je retrouve les rollover, mais toujours pas l'inertie des images ... inertes

signaler à un administrateur
Commentaire de ajja93 le 13/05/2005 17:30:17

Note complémentaire : en changeant "../Images/roll/" par l'url (http://.....), je retrouve les rollover, mais toujours pas l'inertie des images ... inertes

signaler à un administrateur
Commentaire de chimelpremier le 14/05/2005 02:23:39

OK merci ajja 93,le bug est corrigé : ajout de scr1=0 dans la fonction rétabli_img

signaler à un administrateur
Commentaire de ajja93 le 14/05/2005 03:52:33

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.) !

signaler à un administrateur
Commentaire de ajja93 le 14/05/2005 03:56:15

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

signaler à un administrateur
Commentaire de Freedom_09 le 23/01/2006 00:02:35

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 :(

Ajouter un commentaire



Nos sponsors

Sondage...

CalendriCode

Novembre 2008
LMMJVSD
     12
3456789
10111213141516
17181920212223
24252627282930

Consulter la suite du CalendriCode

Appels d'offres



Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel BAÏSE, Merci à Vincent pour ses précieux conseils
CodeS-SourceS.com© Toute reproduction même partielle est interdite sauf accord écrit du Webmaster
CodeS-SourceS.com© est une marque déposée tous droits réservés
Temps d'éxécution de la page : 0,515 sec

Google Coop CodeS-SourceS Google Coop CodeS-SourceS


Certaines images présentes sur le site (notament certains avatars) sont issues des collections IconShock, donc si vous souhaitez utiliser ces icons vous devez les acheter, ne les copiez pas et ne utilisez pas dans vos sites et applications sans les avoir commandé.