begin process at 2012 05 30 03:42:41
  Trouver un code source :
 
dans
 
[ Dernières recherches ]
Accueil > Forum > 

Javascript / DHTML / Ajax

 > 

CSS

 > 

Général

 > 

Rollover avec plusieurs images

Derniers messages déposésPoser une question dans le forum ou lancer une discussion

Rollover avec plusieurs images

samedi 23 juin 2007 à 19:57:28 | Rollover avec plusieurs images

MELBLUES
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.length
for (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>


<body background="pouetpouet.jpg"  onLoad="prechargimg('imagA.gif','imagB.gif','imagC.gif')">

<a href="#" onMouseOut="initial()" onMouseOver="changer()" ><img src="imagA.gif" name="image"></a>

<br>
<br>
<br>

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




J'espère que vous pourrez m'aider, merci !
samedi 23 juin 2007 à 20:17:23 | Re : Rollover avec plusieurs images

yousfane
Salut
Tu veux ajouter d'autres images ou seulement changer les sources de celles du code
samedi 23 juin 2007 à 21:45:13 | Re : Rollover avec plusieurs images

MELBLUES
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 :
<a href="#" onMouseOut="initial()" onMouseOver="changer()" ><img src="imagD.gif" name="image"></a>

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 !
lundi 25 juin 2007 à 05:23:30 | Re : Rollover avec plusieurs images

dvdstory

Membre Club
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.length
for (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.length
for (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>


<body background="pouetpouet.jpg"  onLoad="prechargimg('imagA.gif','imagB.gif','imagC.gif','imagD.gif','imagE.gif','imagF.gif')">

<a href="#" onMouseOut="initial1()" onMouseOver="changer()" ><img src="imagA.gif" name="image1"></a>

<br>
<br>

<a href="#" onMouseOut="initial2()" onMouseOver="changer()" ><img src="imagD.gif" name="image2"></a>
lundi 25 juin 2007 à 10:34:18 | Re : Rollover avec plusieurs images

MELBLUES
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
lundi 25 juin 2007 à 14:00:58 | Re : Rollover avec plusieurs images

Zobibol

Membre Club
Réponse acceptée !
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>


<body background="pouetpouet.jpg"  onLoad="prechargimg('./images/01.jpg','./images/02.jpg','./images/03.jpg','./images/04.jpg','./images/05.jpg','./images/06.jpg')">

<a href="#" onMouseOut="initial()" onMouseOver="changer(0)" ><img src="./images/01.jpg" id="image1"></a>

<br>
<br>

<a href="#" onMouseOut="initial()" onMouseOver="changer(1)" ><img src="./images/04.jpg" id="image2"></a>
</body>
</html>

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




[o-_-o]
lundi 25 juin 2007 à 17:42:40 | Re : Rollover avec plusieurs images

MELBLUES
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 [img]http://forum.aceboard.net/smile/biggthumpup.gif[/img]
mardi 26 juin 2007 à 09:29:58 | Re : Rollover avec plusieurs images

Zobibol

Membre Club
Réponse acceptée !
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]
mardi 26 juin 2007 à 20:33:46 | Re : Rollover avec plusieurs images

MELBLUES
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
mardi 17 juillet 2007 à 23:02:53 | Re : Rollover avec plusieurs images

MELBLUES
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


Cette discussion est classée dans : images, numero, var, doc, precharg

Répondre à ce message

Sujets en rapport avec ce message

Préchargement d'images [ par DAVIMIKA ] Bonjour,J'utilise une galerie photos composée  de photos miniatures qui s'agrandissent lors du survol de la souris.Comment avec mon lien atuel :<img s colorer du texte [ par bayeland ] Salut j'ai telecharger le code ci dessous et il marche tres bien. Le seul probleme et que je ne veux pas qu'il remplace le texte recherche qui se trou Redirection apres diaporama [ par DomBea ] Bonjour, c'est un script qui fait defiler 3 images avec un fondu puis s'arrete. Jusqu'a la tout va bien. J'aimerais qu'ensuite la page soit redirectio page to iframe [ par abdoulax ] Bonjour,J'ai une page ouverte. Je voudrai modifier complement cette page afin de faire de mettre son contenu dans un iframe.par exemple on aurait test Un appel javascript dans une div [ par cosycorner ] Bonjour à tous, Je voudrais insérer des images aléatoires dans une div aux dimensions précises.(en background ?)J'ai trouvé ce script qui fonctionne p bouton clignotant [ par redstonemedia ] Bonsoir à tous et merci d'avoir pris le temps de lire mon message.mon problme c que j'ai créé un bouton qui clignote en javascript et je voudrais qu i changement de src [ par paolinardc ] Bonjour !J'ai écrit un script qui permet de changer le src de plusieurs images (document.images[n°balise].src="") sur un évènement onClick. Tout march connaitre la taille d'un tableau crée dynamiquement [ par David78390 ] Bonjour a tous, je voudrais savoir comment on peut connaitre la taille d'un tableau qui se cré dynamiquement. En fait j'ai un formulaire qui permet défilement image veticalement [ par sAchAttouille ] Salut à tous,bon dabord je suis pas un fort utilisateur de forum sauf cas extreme pour trouver des astuces bout de codes sinon Niet !Je suis pas un fo plusieurs mots en surbrillance [ par tonytruand ] Bonsoir,à force de chercher j'ai fini par réussir à mettre en surbrillance un mot contenu dans un iframe depuis un input.j'aimerai pouvoir faire la mê


Nos sponsors


Sondage...

Comparez les prix


Archos 7 home tablet - 2 Go
Entre 149€ et 159€

Visiter le guide achat

CalendriCode

Mai 2012
LMMJVSD
 123456
78910111213
14151617181920
21222324252627
28293031   

Consulter la suite du CalendriCode

A découvrir
 
Développement réalisé par Nicolas SOREL (Nix) avec l'aide de : Cyril DURAND et Emmanuel (EBArtSoft), 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

Google Coop CodeS-SourceS Google Coop CodeS-SourceS
Temps d'éxécution de la page : 0,936 sec (3)

Nous contacter | Annoncer sur CodeS-SourceS | Mentions légales
Outils Convertisseur VB/C# Snippets et scripts Outils en ligne La ToolBox
Communauté Programmation Photographie Technologie Newsgroups Emploi Forum Blogs
Guide d'achat Téléphonie mobile Image et son Informatique Bureautique Jeux vidéo
Logiciels Internet & Réseau Développement Market Android Jeux & Loisirs Graphisme Multimédia Sécurité Pilotes
Loisirs Cartes virtuelles Vidéos droles Jeux en ligne Géoguide AndroLib (Android Market)