FadeInOut = image qui se bloque durant l'action
Bonjour,
J'annonce, je débute!
Mon problème est le suivant:
J'ai une image et deux fonctions : FadeIn et FadeOut associées à deux addEventListener qui les enclenches à l'aide d'un 'mouseover' 'mouseout'.
Lorsque je survole mon image et que je reste dessus, mon action FadeIn s'enclenche et va au bout du processus. Lorsque je sort de mon image l'action de Fadeout s'enclenche normalement et pareil va au bout du process.
En revanche, si je sors de l'image alors que l'action du FadeIn (par exemple) n'est pas terminé, l'action se fige - Idem pour le FadeOut- et reprend lorsque je retourne dessus.
Je souhaiterais qu'au survol le fadeIn s'enclenche et qu'à n'importe quel moment, je puisse sortir de l'image et que le FadeOut s'enclenche.
Je conçois que cela puisse sembler simple pour certain, mais je dois avouer que je galère depuis un moment.
Comment remédier au problème?
Merci à vous
voici mon code:
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Document sans nom</title>
<style type="text/css">
#contentImg0 {position:relative;width:90px;}
#image0 {position:absolute;}
#cacheImg0 {opacity:0.5;position:relative;}
</style>
<script type="text/javascript">
<!--
function hide(elem)
{
var Img = window.document.getElementById(elem);
Img.style.opacity = 0/100;
return Img;
}
function Fadein(elem)
{
var Img = window.document.getElementById(elem);
opacityImg = Img.style.opacity;
if (opacityImg<=1)
{
opacityImg = ((opacityImg*100)+1)/100;
setTimeout("Fadein('" +elem+ "')",10);
Img.style.opacity = opacityImg;
continue;
}
}
function Fadeout(elem)
{
var Img = window.document.getElementById(elem);
opacityImg = Img.style.opacity;
if ( opacityImg > 0 )
{
opacityImg = ((opacityImg*100)-1)/100;
Img.style.opacity = opacityImg;
setTimeout("Fadeout('" +elem+ "')",10);
continue;
}
}
function survol(event)
{
Fadein('cacheImg0');
}
function out(event)
{
Fadeout('cacheImg0');
}
window.onload = function()
{
document.getElementById('contentImg0').addEventListener('mouseover',survol);
document.getElementById('contentImg0').addEventListener('mouseout',out);
hide('cacheImg0');
}
-->
</script>
</head>
<body>
<div id="contentImg0">
<img id="image0" src="IMG/00.jpg" />
<img id="cacheImg0" src="IMG/couche.png" />
</div>
</body>
</html> |
