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