Rollover avec plusieurs images
Résolu
MELBLUES
Messages postés
6
Date d'inscription
lundi 6 octobre 2003
Statut
Membre
Dernière intervention
17 juillet 2007
-
23 juin 2007 à 19:57
MELBLUES Messages postés 6 Date d'inscription lundi 6 octobre 2003 Statut Membre Dernière intervention 17 juillet 2007 - 17 juil. 2007 à 23:02
MELBLUES Messages postés 6 Date d'inscription lundi 6 octobre 2003 Statut Membre Dernière intervention 17 juillet 2007 - 17 juil. 2007 à 23:02
A voir également:
- Rollover avec plusieurs images
- Vectoriser une image avec photoshop ✓ - Forum Graphisme/design
- Jeux de mots avec image ✓ - Forum C# / .NET
- Automatisation des images ✓ - Forum Javascript / DHTML
- Faire défiler des images en boucle html ✓ - Forum Javascript / DHTML
- Ttttyyyy images - Forum PHP
9 réponses
Zobibol
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
25 juin 2007 à 14:00
25 juin 2007 à 14:00
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]
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]
Zobibol
Messages postés
469
Date d'inscription
mercredi 9 janvier 2002
Statut
Membre
Dernière intervention
20 février 2017
6
26 juin 2007 à 09:29
26 juin 2007 à 09:29
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]
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]
yousfane
Messages postés
243
Date d'inscription
vendredi 24 novembre 2006
Statut
Membre
Dernière intervention
21 décembre 2007
2
23 juin 2007 à 20:17
23 juin 2007 à 20:17
Salut
Tu veux ajouter d'autres images ou seulement changer les sources de celles du code
Tu veux ajouter d'autres images ou seulement changer les sources de celles du code
MELBLUES
Messages postés
6
Date d'inscription
lundi 6 octobre 2003
Statut
Membre
Dernière intervention
17 juillet 2007
23 juin 2007 à 21:45
23 juin 2007 à 21:45
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 !
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 !
Vous n’avez pas trouvé la réponse que vous recherchez ?
Posez votre question
dvdstory
Messages postés
192
Date d'inscription
dimanche 23 janvier 2005
Statut
Membre
Dernière intervention
10 août 2009
25 juin 2007 à 05:23
25 juin 2007 à 05:23
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>
[# ]
[# ]
<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>
[# ]
[# ]
MELBLUES
Messages postés
6
Date d'inscription
lundi 6 octobre 2003
Statut
Membre
Dernière intervention
17 juillet 2007
25 juin 2007 à 10:34
25 juin 2007 à 10:34
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
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
MELBLUES
Messages postés
6
Date d'inscription
lundi 6 octobre 2003
Statut
Membre
Dernière intervention
17 juillet 2007
25 juin 2007 à 17:42
25 juin 2007 à 17:42
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
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
MELBLUES
Messages postés
6
Date d'inscription
lundi 6 octobre 2003
Statut
Membre
Dernière intervention
17 juillet 2007
26 juin 2007 à 20:33
26 juin 2007 à 20:33
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
A bientôt
MELBLUES
Messages postés
6
Date d'inscription
lundi 6 octobre 2003
Statut
Membre
Dernière intervention
17 juillet 2007
17 juil. 2007 à 23:02
17 juil. 2007 à 23:02
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
Merci
