fonction qui "s'affole" au passage trop rapide sur un lien

**filtep** · 11/12/2009, 17h31

Bonjours à tous,

toujours en train d'apprendre j'ai fait (avec votre aide) ce petit bout de code pour travailler sur les effets réalisables avec des images:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<HTML>
<HEAD>
 
<SCRIPT LANGUAGE=JavaScript>
function bouge(x,y)
    {
    if(document.getElementById)
        {
        hautimage += y;
        gaucheimage += x;
        document.getElementById("smile").style.top = hautimage;
        document.getElementById("smile").style.left = gaucheimage;
        document.getElementById("smile").style.height = 100;
        document.getElementById("smile").style.width = 150;
 
        }
    }
 
</SCRIPT>
 
 
<SCRIPT LANGUAGE=JavaScript>
function bougeauto2()
    {
     if(document.getElementById)
      {
        hautimage +=8;
        gaucheimage +=23;
        haut +=10;
        larg +=15;
        document.getElementById("smile").style.top = hautimage;
        document.getElementById("smile").style.left = gaucheimage;
        document.getElementById("smile").style.height = haut;
        document.getElementById("smile").style.width = larg;
 
        if (gaucheimage < 510)
         {setTimeout('bougeauto2()', 10);}
 
}}
 
</SCRIPT>
 
 
<SCRIPT LANGUAGE=JavaScript>
function retour()
    {
     if(document.getElementById)
      {
        hautimage -=8;
        gaucheimage -=23;
        haut -=10;
        larg -=15;
 
        document.getElementById("smile").style.height = haut;
        document.getElementById("smile").style.width = larg;
        document.getElementById("smile").style.top = hautimage;
        document.getElementById("smile").style.left = gaucheimage;
      if (gaucheimage > 80)
         {setTimeout('retour()', 10);}
 
}}
 
</SCRIPT>
 
 
<SCRIPT LANGUAGE=JavaScript>
function ouvre()
{ 
 
     if(document.getElementById)
      {
        hautimage -=5;
        gaucheimage -=8;
        haut +=10;
        larg +=16;
        document.getElementById("smile").style.top = hautimage;
        document.getElementById("smile").style.left = gaucheimage;
        document.getElementById("smile").style.height = haut;
        document.getElementById("smile").style.width = larg;
 
        if (larg < 200)
         {setTimeout('ouvre()', 10);}
        }}
 
</SCRIPT>
 
 
<SCRIPT LANGUAGE=JavaScript>
function ferme()
{ 
 
     if(document.getElementById)
      {
        hautimage +=5;
        gaucheimage +=8;
        haut -=10;
        larg -=16;
        document.getElementById("smile").style.top = hautimage;
        document.getElementById("smile").style.left = gaucheimage;
        document.getElementById("smile").style.height = haut;
        document.getElementById("smile").style.width = larg;
 
        if (larg >0)
         {setTimeout('ferme()', 10);}
        }}
 
</SCRIPT>
</HEAD>
<Body>
 
<SCRIPT LANGUAGE="javascript">
var hautimage = (screen.width/4)-50;
var gaucheimage = (screen.width/2)-75;
var haut = 100;
var larg = 150;
 
document.write('<IMG SRC="Nénuphars.jpg"  height=0;  width=0;  ID=smile STYLE="position:absolute;top:'+hautimage+';left:'+gaucheimage+'">');
</SCRIPT>
 
<FORM>
 
<INPUT TYPE=button VALUE=Voir image  onClick="bouge(0,0);">
<INPUT TYPE=button VALUE=gauche onClick="bouge(-10,0);">
<INPUT TYPE=button VALUE=droite onClick="bouge(10,0);">
<INPUT TYPE=button VALUE=haut onClick="bouge(0,-10);">
<INPUT TYPE=button VALUE=bas onClick="bouge(0,10);"><br><br>
 
<INPUT TYPE=button VALUE=AUTO onClick="bougeauto2();">
<INPUT TYPE=button VALUE=RETOUR onClick="retour();"><br><br>
<INPUT TYPE=button VALUE=OUVRE onClick="haut=0; larg=0; ouvre();">
<INPUT TYPE=button VALUE=FERME onClick="ferme()">
</form>
<br><br><br><br><br><br><br><br><br><br><br><br>
<a href="#" onmouseover="ouvre()"  onmouseout="ferme()">Survolez pour ouvrir</a>
 
</BODY>
</HTML>

J'ai deux questions:
1- si on fait le zouave avec la souris en passant et repassant vite sur le lien "Survolez..." les fonctions "ouvre" et "ferme" s'affolent, l'image clignote, etc, bref ça ne va pas, comment y remédier ?
2- L'utilisation de "(screen.height/2)-('hauteur de l'image'/2)" en paramètre "top" ne centre pas l'image verticalement. Je ne comprend pas

Merci d'avance pour vos réponses et votre aide.

A+
Philippe

**Bovino** · 11/12/2009, 18h45

Envoyé par filtep

1- si on fait le zouave avec la souris en passant et repassant vite sur le lien "Survolez..." les fonctions "ouvre" et "ferme" s'affolent, l'image clignote, etc, bref ça ne va pas, comment y remédier ?

Il faut utiliser un système de flags (booléens) qui te permettent de savoir au lancement d'une fonction si une autre est déjà en cours d'exécution et prévoir une action spécifique si c'est le cas.

2- L'utilisation de "(screen.height/2)-('hauteur de l'image'/2)" en paramètre "top" ne centre pas l'image verticalement. Je ne comprend pas

screen.height fait référence à la taille de l'écran, mais style.top positionne par rapport à la fenêtre utilisable du navigateur, il y a donc une différence effectivement.

**filtep** · 11/12/2009, 19h29

Merci pour tes réponses

1- peux tu me donner un exemple (ou 1 lien) compréhensible pour un débutant concernant les flags.
2- peut on écrire 'document.window.height' ? je crois que non, sinon comment faire pour centrer verticalement une image quelque soit la taille d'écran de l'utilisateur ?

A+
Merci

fonction qui "s'affole" au passage trop rapide sur un lien

JavaScript

Discussions similaires

Partager

Partager