Rollover avec plusieurs images [Résolu]

MELBLUES 6 Messages postés lundi 6 octobre 2003Date d'inscription 17 juillet 2007 Dernière intervention - 23 juin 2007 à 19:57 - Dernière réponse : MELBLUES 6 Messages postés lundi 6 octobre 2003Date d'inscription 17 juillet 2007 Dernière intervention
- 17 juil. 2007 à 23:02
Bonjour, j'espère ne pas me tromper de section en postant ce message...
J'aimerais savoir si l'un d'entre vous peut me filer un petit coup de main rapide svp, j'ai un problème avec un script que j'ai trouvé sur "jejavascript", il s'agit d'un rollover sur plusieurs images (ici 3). Mon problème est le suivant :
Je dois placer deux rollovers sur la même page, par exemple, l'un ferait défiler les images A-B-C et l'autre D-E-F.
Or comme je suis plutôt inexpérimenté en JS, bien que je sache ce qu'il faut faire (copier le script en renommant les variables, fonctions, etc., pour chaque rollover), visiblement je le fais mal car ça ne fonctionne pas, en fait je ne sais pas du tout ce qu'il faut renommer, même en essayant d'être logique lol.
Voici le code épuré et simplifié :

<head>
<script language="JavaScript">
<!--
//PLF-http://www.jejavascript.net/
function objet() {
this.length = objet.arguments.lengthfor (var i 0; i < this.length; i++) this[i+1] objet.arguments[i]
}
var nom = new objet ("imagA.gif", "imagB.gif", "imagC.gif");
var numero = 1;
function changer() {
numero += 1;if (numero nom.length + 1) numero 1;
document.image.src = ""+nom[numero];
roll=window.setTimeout('changer()',50)
}
function initial() {if (numero !1) numero 1;
window.clearTimeout(roll);
document.image.src = ""+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>
</head>

[# ]

ICI JE VEUX REPETER L'OPERATION, MAIS AVEC 3 AUTRES IMAGES.

J'espère que vous pourrez m'aider, merci !
Afficher la suite 

9 réponses

Répondre au sujet
Zobibol 469 Messages postés mercredi 9 janvier 2002Date d'inscription 20 février 2017 Dernière intervention - 25 juin 2007 à 14:00
+3
Utile
Bien le bonjour, en fait pour pouvoir gérer plusieurs rollOver, avec les images, il faut ( enfin, c'est la solution que j'ai trouvé avec ton source ), gérer un tableau bi-dimensionnel pour stocké les images :

J'en suis arrivé au script suivant :

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

var nom = [ ["./images/01.jpg", "./images/02.jpg", "./images/03.jpg"], ["./images/04.jpg", "./images/05.jpg", "./images/06.jpg"] ];
var numero = 0;

/**
* Changement d'image
*
* @param pictNumber
*       numéro à prendre en compte pour les enregistrement
*/
function changer(pictNumber) {
numero++;
if (numero > nom[pictNumber].length ) numero = 0;
document.getElementById("image"+(pictNumber+1) ).src=nom[pictNumber][numero];
roll=window.setTimeout('changer('+pictNumber+')',550)
}

/**
* Arrêt du timer
*/
function initial() {
window.clearTimeout(roll);
}

/**
* Préchargement des images
*/
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>
</head>

[# ]

[# ]

</html>

Attention, j'ai changé le nom des images....

[o-_-o]
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de Zobibol
Zobibol 469 Messages postés mercredi 9 janvier 2002Date d'inscription 20 février 2017 Dernière intervention - 26 juin 2007 à 09:29
+3
Utile
Alors, pour répondre à ta première question, oui, il est tout à fait possible de dupliquer les méthodes et les propriétés, mais cela implique qu'en cas d'évolution ou autre, il faut le faire sur les toutes les méthodes, donc une redondance de traitement donc une éventuelle redondance de bugs ( parce que ça arrive aussi ).

Ensuite pour réinitialiser la première image lors du mouseout, il suffit de rajouter un paramètre pictNumber à la méthode initial.
Elle deviendrait donc :

/**
* Arrêt du timer
*
* @param pictNumber
*       numéro de l'image à réinitialiser.
*/
function initial(pictNumber) {
    // Réaffichage de la première image
    document.getElementById("image"+(pictNumber+1) ).src=nom[pictNumber][0];
    // détruit le timer
    window.clearTimeout(roll);
}

et sur l'appel :
    onmouseout= "initial (0)" pour la première et initial(1) pour la seconde.
et voilà ...

[o-_-o]
Cette réponse vous a-t-elle aidé ?  
Commenter la réponse de Zobibol
yousfane 246 Messages postés vendredi 24 novembre 2006Date d'inscription 21 décembre 2007 Dernière intervention - 23 juin 2007 à 20:17
0
Utile
Salut
Tu veux ajouter d'autres images ou seulement changer les sources de celles du code
Commenter la réponse de yousfane
MELBLUES 6 Messages postés lundi 6 octobre 2003Date d'inscription 17 juillet 2007 Dernière intervention - 23 juin 2007 à 21:45
0
Utile
En fait, avec le code que j'ai mis, j'ai un seul rollover sur 3 images.
Je veux en ajouter un autre, mais avec 3 autres images (différentes des trois premières). Donc je crée un autre lien pour les images D-E-F :
[# ]

Le problème, c'est que si je ne change pas le script, les images qui vont défiler seront celles indiquées dans le premier script (donc les images A-B-C, alors que je veux D-E-F).

La solution logique est de créer un second script et d'en renommer les objets, variables, etc., ce sont finalement deux script indépendants, mais je ne sais pas ce qu'il faut renommer... Par exemple, dans mon second script, au lieu de laisser "objet" et "nom", j'écris "objet1", "nom1", pour les différencier du premier script qui se rapporte au premier rollover.
J'essaye d'être clair, mais je ne sais pas si je le suis...

Un script différent par lien rollover en fait...

Merci !
Commenter la réponse de MELBLUES
dvdstory 196 Messages postés dimanche 23 janvier 2005Date d'inscription 10 août 2009 Dernière intervention - 25 juin 2007 à 05:23
0
Utile
J'ai pas tester et ça ne fonctionne sans doute pas, mais c'est un début, je sais pas si ta ut l'idéé de séparrer les fonctions.

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

function objet1() {
this.length = objet.arguments.lengthfor (var i 0; i < this.length; i++) this[i+1] objet.arguments[i]
}
var nom = new objet ("imagA.gif", "imagB.gif", "imagC.gif");
var numero = 1;

function changer() {
numero += 1;if (numero nom.length + 1) numero 1;
document.image.src = ""+nom[numero];
roll=window.setTimeout('changer()',50)
}

function objet2() {
this.length = objet.arguments.lengthfor (var i 0; i < this.length; i++) this[i+1] objet.arguments[i]
}
var nom = new objet ("imagD.gif", "imagE.gif", "imagF.gif");
var numero = 1;

function initial1() {if (numero !1) numero 1;
window.clearTimeout(roll);
document.image.src = ""+nom[numero];
}

function initial2() {if (numero !1) numero 1;
window.clearTimeout(roll);
document.image.src = ""+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>
</head>

[# ]

[# ]
Commenter la réponse de dvdstory
MELBLUES 6 Messages postés lundi 6 octobre 2003Date d'inscription 17 juillet 2007 Dernière intervention - 25 juin 2007 à 10:34
0
Utile
Bonjour, effectivement ça ne fonctionne pas, j'ai essayé tant bien que mal de l'arranger, mais je n'y connais pas grand chose en JS...
Je suis sûr que c'est simplissime pour quelqu'un qui connaît JS, il faut simplement savoir quels sont les "éléments" du code à renommer.
Voici le lien original : http://www.jejavascript.net/rollov_3.php

Merci de t'être penché dessus en tout cas
Commenter la réponse de MELBLUES
MELBLUES 6 Messages postés lundi 6 octobre 2003Date d'inscription 17 juillet 2007 Dernière intervention - 25 juin 2007 à 17:42
0
Utile
Merci beaucoup ! Ca fonctionne très bien, mais j'ai une petite question, histoire de ne pas repartir sans avoir rien appris, n'était-il pas plus simple de copier bêtement le script, et de renommer les fonctions, variables et objets ? On aurait eu deux scripts, c'est sûrement moins bien, mais est-ce possible finalement ?

Une dernière question pour vous embêter encore un peu, comment faire pour que, lors du OnMouseOut, mon image redevienne automatiquement la première de la série qui a défilé ? J'ai essayé de modifié la fonction "initial()", mais sans succès.

Merci encore pour le script
Commenter la réponse de MELBLUES
MELBLUES 6 Messages postés lundi 6 octobre 2003Date d'inscription 17 juillet 2007 Dernière intervention - 26 juin 2007 à 20:33
0
Utile
Merci Zobibol, c'est très sympa d'avoir pris le temps de répondre à toutes mes questions, je me remets au boulot, j'ai du pain sur la planche.

A bientôt
Commenter la réponse de MELBLUES
MELBLUES 6 Messages postés lundi 6 octobre 2003Date d'inscription 17 juillet 2007 Dernière intervention - 17 juil. 2007 à 23:02
0
Utile
Salut, je reviens à la charge pour un tout petit détail. Le rollover à trois images fonctionne parfaitement sous Firefox, mais sous IE, pendant le défilement, il y a une image reconnue comme manquante (mes 3 images défilent, mais j'ai une croix rouge EN PLUS, entre chaque cycle). Je pense qu'IE ne doit pas comprendre la boucle sans passer par la case "zéro", d'où cette horrible croix rouge qui s'affiche entre deux images. Quelqu'un aurait une idée svp ?

Merci
Commenter la réponse de MELBLUES

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.