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>