<div> qui interfère avec mes images
J'ai une image qui est positionner par dessus un <div>.
Des que mon curseur touche le <div>, j’envoie de l'information a JavaScript comme quoi que mon curseur touche le fond d’écran.
Mon problème est des que je touche l'image "overlapping" le fond d’écran, JavaScript crois que je suis entrain de toucher l'image et le fond d’écran en même tant.
Serais-ce possible de corriger ce problème en utilisant CSS?
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
| <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8">
<head>
<link rel="stylesheet" type="text/css" href="default.css" />
<script language="JavaScript">
var SRC = 0, Hovering_Picture = false, Pictures = ["bj.png", "calc.png"];
var Display_Picture = function(x){
document.getElementById("script").src = x;
};
function Switch_Picture(){
if(SRC < Pictures.length && Hovering_Picture === false){
Display_Picture(Pictures[SRC]);
window.setTimeout(Switch_Picture, 3000);
SRC++;
}else if(SRC === Pictures.length && Hovering_Picture === false){
SRC = 0;
Switch_Picture();
}
}
</script>
</head>
<body onload="Switch_Picture();">
<div id="wrapper" onmouseover="alert('background')">
<div id="slideshow" onmousedown="return false">
<img src="bj.png" id="script" onmouseover="alert('picture');Hovering_Picture = true; Switch_Picture();" />
<ul id="script_menu">
<li><img src="bj.png" class="script_picture" onmouseover="alert('picture');Hovering_Picture = true; Display_Picture('bj.png');" /></li>
<li><img src="calc.png" class="script_picture" onmouseover="alert('picture');Hovering_Picture = true; Display_Picture('calc.png');" /></li>
</ul>
</div>
</div>
</body>
</html> |
