1 script, pour animer une image, qui en regroupe 3 scripts

Version imprimable

05/04/2006, 03h50
vampyer972

1 script, pour animer une image, qui en regroupe 3 scripts

Bonsoir a tous

Je suis entrain de pr�parer mon premier site, et j�ai eu une grosse migraine apr�s avoir seulement con�u son squelette et connus quelques pages testes.

Votre aide serait la bienvenue si vous pouvez m�aider � � regroup�, o� � concevoir� si je peux le dire, 3 scriptes en un seul.

Le but de cette manipulation c�est de cr�er une animation (d�images) lors du passage du curseur de la souris et cette animation aurais pour � finalit� � un menu d�roulant.

Si je sois donn� des �tapes, elles seront les suivantes :
_Premi�rement, lorsque curseur passe sur l�image (onmousover), il y a une petite animation. En effet, je voudrais montrer l�ouverture d�un coffre par l�interm�diaire de 3 images de transitions

_Deuxi�mement, apr�s c�est images de transition (et si le curseur de la souris est toujours sur l�image), un menu d�roulant(verticale) appara�t sur la derni�re image de transition. A partir de la, je pourrais faire un choix..

_Troisi�mement, si j�enl�ve ou le curseur de la souris se trouve hors du menu ou hors de l�image (onmouseout), il y a l�animation dans le sens inverse du � premi�rement �.

J�ai trouv� ces scriptes dans les logiciels webExpert, mais je n�arrive pas a les associ�s pour qu�ils fassent ce que je souhaite.

Merci d�avance de votre aide, car j�ai une grosse migraine � faire cela

bonjour,

voici un script qui va sans doute faire ton bonheur. Pas facile � r�aliser...
Fonctionne sous IE et Firefox

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
 
<html>
<head>
<title></title>
<style type="text/css">
<!--
#idMenu{
display: none;
overflow: auto;
height: 100px;
width: 100px;
border: 2px ridge #8E784F;
background-color: #8E784F;
position: absolute;
left: 50px;
top: 10px;
}
 
#idMenu a{
color: #FFFFFF;
}
#idC{
border: 2px ridge #000000;
width: 200px;
}
//-->
</style>
 
<script type="text/javascript">
<!--
var img, n, objImg, duree;
var chronoOver, chronoOut, chronoOutE1;
 
 
function initvar()
{
  //liste des images de memes dimensions!!
 img = new Array("i1.jpg","i2.jpg","i3.jpg");  
 
 duree = 500; //ms
 objImg = document.getElementById("idImg");
 chronoOver = -1;
 chronoOut = -1;
 chronoOutE1 = -1;
 n = 0;
}
 
function AnimeOver()
{
//Debut verification variables
 document.getElementById("id1").innerHTML="AnimeOver "+n+"/"+img.length;
//fin verification variables
 
 n++;
 if (n>=0 && n<img.length)
 {
   objImg.src = img[n];
 }
 else
 {
   clearInterval(chronoOver);
   chronoOver = -1;
   n = img.length;
   document.getElementById("idMenu").style.display = "block";
 }
}
 
function AnimeOut()
{
//Debut verification variables
 document.getElementById("id2").innerHTML="AnimeOut "+n+"/"+img.length;
//fin verification variables
 
 n--;
 if (n>=0 && n<img.length)
 {
   objImg.src = img[n];
 }
 else
 {
   clearInterval(chronoOut);
   chronoOut = -1;
   n = 0;
 }
}
 
//onmouseover sur l image
function MouseOver()
{
 if (chronoOut!=-1)
 {
   clearInterval(chronoOut);   //arret si un out est en cours
   chronoOut = -1;
 }
 
 chronoOver = setInterval("AnimeOver()",duree);   //demarrage animation over
}
 
//onmouseout sur l image
function AnimeOut1()
{
 document.getElementById("idMenu").style.display = "none";
 chronoOut = setInterval("AnimeOut()",duree); //demarrage animation out
}
 
function MouseOut()
{
 if (chronoOver!=-1)
 {
   clearInterval(chronoOver);  //arret si un over est en cours
   chronoOver = -1;
 }
 
 //animation out demarre apres 1 sec > l utilisateur a le temps d aller sur le menu
 //cf menuOver()
 chronoOutE1 = setTimeout("AnimeOut1()",1000);
}
 
//onmouseover sur menu
function MenuOver()
{
 if (chronoOutE1!=-1)
 {
   //si utilisateur sur menu > arret mouseout sur animation avant qu'elle ne commence cf Mouseout()
   clearTimeout(chronoOutE1);
   chronoOutE1 = -1;
 }
}
 
//onmouseout sur menu
function MenuOut()
{
 chronoOutE1 = setTimeout("AnimeOut1()",500);  //demarrage animation out
}
//-->
</script>
 
</head>
 
<body onload="initvar()">
<div id="idC">
<img src="i1.jpg" id="idImg" onmouseover="MouseOver();" onmouseout="MouseOut()">
<div id="idMenu" onmouseover="MenuOver()" onmouseout="MenuOut()">
<a href="">lien 1</a><br>
<a href="">lien 2</a><br>
<a href="">lien 3</a><br>
<a href="">lien 4</a><br>
<a href="">lien 5</a><br>
<a href="">lien 6</a><br>
<a href="">lien 7</a>
</div>
</div>
 
<!-- id1 et id 2 utilises pour affichage de resultats intermediaires-->
<br><br><br><br><br><br><br><br><br><br>
<div id="id1">&nbsp;</div>
<div id="id2">&nbsp;</div>
 
</body>
 
</html>

si tu veux plus d'explications, n'h�site pas.

07/04/2006, 05h34
vampyer972

effectivement, ce script n'est pas facile a faire et je t'en remercie

Cependant, je l'ai essayai, mais il ne fonctionne pas pour moi.
voici quelques-unes unes de mes "caract�ristiques":
_ j'utilise Nvu comme logiciel
_ j'ai Windows xp pack 1et et j'ai mon I.E. version 6,dernierement j'ai effectu� un formatage et je n'ai pas encor fais de mise a jour
_ j'ai mis les 3 images dans le m�me dossier ou j�ai enregistr� ma page web
_ et lorsque j'ai essayai le script, il affiche seulement la premi�re image, et il ne se passe rien lorsque le curseur passe dessus
_ les images sont enregistr�es en "jpeg", j'ai modifier l'extension dans le scripte, mais rien ne change au r�sultat

et oui, j'ai quelques questions:
_ Si je veux mettre plusieurs images qui "s'animent" comme celle du script, et ces autres images n'ont pas les m�mes dimensions, que dois-je mettre dans la fonction initvar?
_ Et tu as dis que "id1 et id 2 utilises pour affichage des r�sultats interm�diaires", cela voudrais dire qu'ils servent � mettre d'autres images "anim�es"?
07/04/2006, 05h39
vampyer972

j'ai oubli� de pr�ciser que j'ai fais mes 3 images avec paint, et le premiere affiche un "1", la seconde un "2" et la derniere un "3", pour que je puisse bien voir cette "pseudo" animation
07/04/2006, 10h52
Auteur
Citation:

Envoy� par vampyer972

_ j'utilise Nvu comme logiciel

je ne connais NVU que de nom... Je pense q'un simple copier-coller devrait suffire � int�grer ce code dans ta page.

Citation:

Envoy� par vampyer972

_ j'ai Windows xp pack 1et et j'ai mon I.E. version 6,dernierement j'ai effectu� un formatage et je n'ai pas encor fais de mise a jour

je l'ai test� sous IE 5 et firefox 1.0 sous win 98 je n'ai pas de souci particulier. A priori sous XP et IE 6 cela devrait marcher. Si IE t'indique des erreurs peux tu me dire lesquelles ? (double-clique sur icone en bas � gauche si elle a la forme d'un ? sur fond jaune).

Citation:

Envoy� par vampyer972

_ j'ai mis les 3 images dans le m�me dossier ou j�ai enregistr� ma page web
_ et lorsque j'ai essayai le script, il affiche seulement la premi�re image, et il ne se passe rien lorsque le curseur passe dessus
_ les images sont enregistr�es en "jpeg", j'ai modifier l'extension dans le scripte, mais rien ne change au r�sultat

normal qu'au moins la premi�re image soit affich�e, elle est dans le code HTML. S'il ne se passe rien, c'est que tu t'es peut-�tre tromp� dans le nom des images, il ne faut pas oublier l'extension (jpg, jpeg, ...)

Citation:

Envoy� par vampyer972

et oui, j'ai quelques questions:
_ Si je veux mettre plusieurs images qui "s'animent" comme celle du script, et ces autres images n'ont pas les m�mes dimensions, que dois-je mettre dans la fonction initvar?

le probl�me des images qui n'ont pas la m�me dimension est que le passage de l'une � l'autre risque de donner un effet pas tr�s joli. initvar n'est l� que pour initialiser des variables javascript.

Citation:

Envoy� par vampyer972

_ Et tu as dis que "id1 et id 2 utilises pour affichage des r�sultats interm�diaires", cela voudrais dire qu'ils servent � mettre d'autres images "anim�es"?

non, j'ai ins�r� ces lignes de code simplement pour v�rifier le contenu de certaines variables, c'est plus propre que la fonction alert(). Tu peux supprimer ces lignes de code. Dans le code HTML :
Code:

1 2 3 4 5  <br><br><br><br><br><br><br><br><br><br> <div id="id1"> </div> <div id="id2"> </div>
dans le code javascript, fonction AnimeOver()
Code:

1 2 3 4 //Debut verification variables document.getElementById("id1").innerHTML="AnimeOver "+n+"/"+img.length; //fin verification variables
dans le code javascript, fonction AnimeOut()
Code:

1 2 3 4 //Debut verification variables document.getElementById("id2").innerHTML="AnimeOut "+n+"/"+img.length; //fin verification variables
07/04/2006, 20h31
vampyer972

Super :D , j'ai utilis� webExpert et sa m'affiche l'animation. Cependant il y a quelques "bug". En effet quand je teste l'animation lorsque m'a page web s'ouvre pour la 1ere fois, elle fonctionne parfaitement, mais apr�s cela fonctionne plus correctement si le curseur est sur le menu et que je mets celui ci sur l'image pendant moins d'une seconde.

Enfin, j'ai pu contourn� le probl�me en augmentant la taille du menu de telle sorte qu'il a le m�me "width" et "height" que l'image, et sa fonctionne sans probl�me, I very happy

Ce qui me chagrine :( , c'est que se script fonctionne sur WebExpert et non sur Nvu :? , pourtant je pr�f�re Nvu a WebExpert, car il m'est plus facile a faire des pages web avec ce logiciel
07/04/2006, 20h34
vampyer972

Il n'y a pas un moyen plus simple plus r�gler la hauteur et la largeur du menu, pour quelle soit la m�me que l'image?; car c'est assez fastidieux de le faire manuellement
08/04/2006, 11h27
Auteur

Citation:

Envoy� par vampyer972

Super :D , j'ai utilis� webExpert et sa m'affiche l'animation. Cependant il y a quelques "bug". En effet quand je teste l'animation lorsque m'a page web s'ouvre pour la 1ere fois, elle fonctionne parfaitement, mais apr�s cela fonctionne plus correctement si le curseur est sur le menu et que je mets celui ci sur l'image pendant moins d'une seconde.

je l'avais rep�r�. Cela vient du fait que lorsque tu quittes le menu (fonction MenuOut()) tu ex�cutes la fonction AnimeOut1() sans v�rifier la position du curseur (curseur sur l'image ou non).

Citation:

Envoy� par vampyer972

Enfin, j'ai pu contourn� le probl�me en augmentant la taille du menu de telle sorte qu'il a le m�me "width" et "height" que l'image, et sa fonctionne sans probl�me, I very happy

je serais curieux de voir ta feuille de style. Si tu superposes les div, tu n'as pas un probl�me de transparence ? (le div menu -idMenu- a une couleur de fond). Tu jou� sur les z-index ?

Citation:

Envoy� par vampyer972

Ce qui me chagrine :( , c'est que se script fonctionne sur WebExpert et non sur Nvu :? , pourtant je pr�f�re Nvu a WebExpert, car il m'est plus facile a faire des pages web avec ce logiciel

curieux en effet... As tu essay� d'ouvir ta page HTML en utilisant directement le navigateur IE ou FF ?
08/04/2006, 16h15
vampyer972

je ne sais pas comment effacer ce message... donc voila
08/04/2006, 16h16
vampyer972

Code:

je serais curieux de voir ta feuille de style. Si tu superposes les div, tu n'as pas un problème de transparence ? (le div menu -idMenu- a une couleur de fond).

et oui, bizarrement sa fonctionne, le probl�me survient lorsque je donne la valeur transparent au background-color: de idMenu

autrement, si je garde la valeur #8E784F, le script fonctionne.
..comment met -on des images dans les messages?

Code:

Tu joué sur les z-index

.. je suis qu'un novice en programmation HTLM, cela veux dire quoi :?: lol

Code:

As tu essayé d'ouvir ta page HTML en utilisant directement le navigateur IE ou FF

, j'utilise la visionneuse internet de WebExpert pour voir le "futur" r�sultat, puis je regarde sur une page web normal

sa veux dire quoi "...en utilisant directement le navigateur FF" :?:
08/04/2006, 18h39
vampyer972

j'ai contourn� le probl�me qui survenait en mettant la valeur transparent au backgroung-color de #idMenu, il suffisait de mettre la derni�re image dans un background-image
08/04/2006, 20h02
Auteur

Citation:

Envoy� par vampyer972

le navigateur FF"

navigateur FF = navigateur Firefox :wink: Comme FF et NVU sont du m�me projet Mozilla, je pensais que tu avais Firefox en plus de NVU.

Citation:

Envoy� par vampyer972

j'ai contourn� le probl�me qui survenait en mettant la valeur transparent au backgroung-color de #idMenu, il suffisait de mettre la derni�re image dans un background-image

j'ai l'impression que tu as modifi� le script d'origine, je peux voir ton travail ? Et dis moi o� �a bloque pr�cis�ment ?

:D
Effectivement, j�ai un chouia modifier le script d�origine ; j�ai enlev� certain <br> qui �tait en trop, ajout� un <center> et mis de la couleur dans le <div id="idMenu"�>, r�gl� la taille du <div id="idC"> et mis un � background-color: � et chang� la taille dans le � #idMenu �� j�oubliais, j�ai ajout� un � cursor :hand � dans le � #idC �

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
<html>
<head>
  <title></title>
 <style type="text/css"> 
<!-- 
#idMenu{ 
display: none; 
overflow: auto; 
height: 116px; 
width: 160px; 
border: 1px ridge #8E784F; 
background-image: url(file:///D:/mon%20site/animation%20image/i3.JPG);
position: absolute; 
left: 12px; 
top: 17px; 
} 
 
#idMenu a{ 
color: #FFFFFF; 
} 
#idC{ 
border: 1px ridge #000000; 
width: 200px;
cursor:hand; 
} 
//--> 
</style> 
 
<script type="text/javascript"> 
<!-- 
var img, n, objImg, duree; 
var chronoOver, chronoOut, chronoOutE1; 
 
 
function initvar() 
{ 
  //liste des images de memes dimensions!! 
 img = new Array("i1.jpg","i2.jpg","i3.jpg");  
 
 duree = 500; //ms 
 objImg = document.getElementById("idImg"); 
 chronoOver = -1; 
 chronoOut = -1; 
 chronoOutE1 = -1; 
 n = 0; 
} 
 
function AnimeOver() 
{ 
//Debut verification variables 
 document.getElementById("id1").innerHTML="AnimeOver "+n+"/"+img.length; 
//fin verification variables 
 
 n++; 
 if (n>=0 && n<img.length) 
 { 
   objImg.src = img[n]; 
 } 
 else 
 { 
   clearInterval(chronoOver); 
   chronoOver = -1; 
   n = img.length; 
   document.getElementById("idMenu").style.display = "block"; 
 } 
} 
 
function AnimeOut() 
{ 
//Debut verification variables 
 document.getElementById("id2").innerHTML="AnimeOut "+n+"/"+img.length; 
//fin verification variables 
 
 n--; 
 if (n>=0 && n<img.length) 
 { 
   objImg.src = img[n]; 
 } 
 else 
 { 
   clearInterval(chronoOut); 
   chronoOut = -1; 
   n = 0; 
 } 
} 
 
//onmouseover sur l image 
function MouseOver() 
{ 
 if (chronoOut!=-1) 
 { 
   clearInterval(chronoOut);   //arret si un out est en cours 
   chronoOut = -1; 
 } 
 
 chronoOver = setInterval("AnimeOver()",duree);   //demarrage animation over 
} 
 
//onmouseout sur l image 
function AnimeOut1() 
{ 
 document.getElementById("idMenu").style.display = "none"; 
 chronoOut = setInterval("AnimeOut()",duree); //demarrage animation out 
} 
 
function MouseOut() 
{ 
 if (chronoOver!=-1) 
 { 
   clearInterval(chronoOver);  //arret si un over est en cours 
   chronoOver = -1; 
 } 
 
 //animation out demarre apres 1 sec > l utilisateur a le temps d aller sur le menu 
 //cf menuOver() 
 chronoOutE1 = setTimeout("AnimeOut1()",1000); 
} 
 
//onmouseover sur menu 
function MenuOver() 
{ 
 if (chronoOutE1!=-1) 
 { 
   //si utilisateur sur menu > arret mouseout sur animation avant qu'elle ne commence cf Mouseout() 
   clearTimeout(chronoOutE1); 
   chronoOutE1 = -1; 
 } 
} 
 
//onmouseout sur menu 
function MenuOut() 
{ 
 chronoOutE1 = setTimeout("AnimeOut1()",500);  //demarrage animation out 
} 
//--> 
</script> 
 
</head> 
 
<body onload="initvar()"> 
<div style="left: 8px; width: 160px;" id="idC"> 
<img src="i1.jpg" id="idImg" onmouseover="MouseOver();" onmouseout="MouseOut()"> 
<div id="idMenu" onmouseover="MenuOver()" onmouseout="MenuOut()"> 
<center><br><a href=""><font color="#FF0000">mon lien 1</font></a><br> 
<a href=""><font color="#FF0000">mon lien 2</font></a><br> 
<a href=""><font color="#FF0000">mon lien 3</font></a><br>  
<a href=""><font color="#FF0000">mon lien 4</font></a></center>
</div> 
</div> 
 
<!-- id1 et id 2 utilises pour affichage de resultats intermediaires--> 
<br><br><br><br>
<div id="id1">&nbsp;</div> 
<div id="id2">&nbsp;</div> 
 
</body> 
 
</html>

:lol: d�sol�

�a bloquais car sois j'avais mis le background-color: transparent; dans le #idMenu et parce que le <div id="idC"> n'avait pas la m�me taille de l'image, mais maintenant que j'ai mis un background-image dans le #idMenu, sa bloque plus

ps: l'animation fonctionne lorsque je mets se script dans WebExpert, mais il ne fonctionne toujours pas dans Nvu :cry:

09/04/2006, 00h06
Auteur

Citation:

:lol: d�sol�

pourquoi d�sol� ? Pour avoir am�lior� le code ? Je ne vais pas te le reprocher :roll: .

Pour ce qui est de NVU je ne sais pas quoi te r�pondre. Peut-�tre un d�but de r�ponse ici :
http://www.geckozone.org/forum/viewtopic.php?t=24967

L'auteur de l'article indique une fa�on de proc�der pour inclure son code PHP. Il y a sans doute la m�me proc�dure � faire avec le javascript.
Ou essaye de mettre ton script dans un fichier externe comme il est reommand� plus bas.

Tu cr�es un fichier JS puis t'ins�re entre les balises <head></head> le code ci-dessous pour faire le lien avec le script externe.

Code:

<script type="text/javascript" src="MonFichier.js"></script>