Code mouseover ne fonctionne pas
Bonjour à tous, et déjà je commence par vous remercier de vous arrêter ici ^^
donc j'explique mon problème, j'ai une image centrale auquel j'applique en alternance un masque en damier
sur le côté droit, j'ai un menu que je met en surbrillance au passage de la souris, et qui applique un autre masque et cache mon masque en damier
mais mieux que des mots, je vous met un lien du site en question, et bien évidement tout les codes
si quelqu'un sait comment arranger mon problème, ou m'aiguiller ça serait super sympa.
autre chose bizarre, aux lignes html 38, 43, 59, 64 si je ferme ma balise <div ">" elle ne marche pas
mes soucis que j'ai :
- quand je passe ma souris au dessus de ma deuxième ligne de menu : la première se met aussi en surbrillance alors qu'elle devrait pas
- quand je passe ma souris au dessus de l'image principale, le masque damier s’arrête, et il ne devrait pas non plus
http://angel.darkness.free.fr
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
|
<!DOCTYPE html>
<!--
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
-->
<html>
<head>
<title>Ambiance Artchitecture</title>
<link rel="icon" href="./img/favicon.ico" />
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" media="screen" type="text/css" title="Exemple" href="./sc/steelsheet.css"/>
<script type="text/javascript" src="./sc/main.js"> </script>
</head>
<body>
<div id="l">
<div id="l1">
<img src="./img/l1.png" onload="hide('l1')"/>
</div>
<div id="l2">
<img src="./img/l2.png" onload="hide('l2')"/>
</div>
<div id="l3">
<img src="./img/l3.png" onload="hide('l3')"/>
</div>
<div id="l4">
<img src="./img/l4.png" onload="hide('l4')"/>
</div>
</div>
<!-- debut des paramatres du menu -->
<!-- imageries commerciales -->
<!-- on affiche le bouton au passage de la souris dessus -->
<div id="pos_ic"
onMouseOver="show('ic')"
onMouseOut="hide('ic')"
</div>
<!-- on masque le damier au passage de la souris sur une ligne de menu -->
<div id="pos_ic"
onMouseOver="hide('calc')"
onMouseOut="show('calc')"
</div>
<!-- on affiche le masque pour laisser que la ligne -->
<div id="pos_ic"
onMouseOver="show('l1')"
onMouseOut="hide('l1')">
</div>
<!-- on masque le bouton à son chargement -->
<img id="ic"
src="./img/ic.jpg"
onload="hide('ic')" />
<!-- permis de construire -->
<!-- on affiche le bouton au passage de la souris dessus -->
<div id="pos_pdc"
onMouseOver="show('pdc')"
onMouseOut="hide('pdc')"
</div>
<!-- on masque le damier au passage de la souris sur une ligne de menu -->
<div id="pos_pdc"
onMouseOver="hide('calc')"
onMouseOut="show('calc')"
</div>
<!-- on affiche le masque pour laisser que la ligne -->
<div id="pos_pdc"
onMouseOver="show('l2')"
onMouseOut="hide('l2')">
</div>
<!-- on masque le bouton à son chargement -->
<img id="pdc"
src="./img/pdc.jpg"
onload="hide('pdc')" />
<!-- afficahge du calque damier -->
<img src="" id="calc" />
<!-- afficahge des miniatures -->
<div id="line">
<img src="./img/demo.jpg" id="ima" />
</div>
</body>
</html> |
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
|
// affichage aléatoire des images
// un trop petit nombre d'images augmente le risque de doublon
// si 4 images = *3+1
/*
function randomImg(){
document.getElementById('ima').src="./img/ic/img_"+Math.round(Math.random()*3+1)+".jpg";
document.getElementById('ima2').src="./img/ic/img_"+Math.round(Math.random()*3+1)+".jpg";
document.getElementById('ima3').src="./img/ic/img_"+Math.round(Math.random()*3+1)+".jpg";}
*/
var altmasq = 0;
altmasq = setInterval(function altern(){
var urls=new Array();
urls[0]="http://angel.darkness.free.fr/img/c1.png";
urls[1]="http://angel.darkness.free.fr/img/c2.png";
var img=document.getElementById("calc");
if(img.src==urls[0]){img.src=urls[1]}
else{img.src=urls[0]}},
1500);
function show(id) {
document.getElementById(id).style.visibility = "visible";
}
function hide(id) {
document.getElementById(id).style.visibility = "hidden";
} |
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
|
/*
To change this license header, choose License Headers in Project Properties.
To change this template file, choose Tools | Templates
and open the template in the editor.
*/
/*
Created on : 18 nov. 2015, 19:13:52
Author : Valgreg
*/
body {
position: fixed;
background-repeat: no-repeat;
background-color: #4f4f4f;
background-image: url(../img/bg.jpg);
}
#line{
left: 0px;
top: 88px;
position: fixed;
}
#l1{
top: 88px;
left: 0px;
z-index: 3;
position: fixed;
}
#l2{
top: 88px;
left: 0px;
z-index: 3;
position: fixed;
}
#l3{
top: 88px;
left: 0px;
z-index: 3;
position: fixed;
}
#l4{
top: 88px;
left: 0px;
z-index: 3;
position: fixed;
}
#pos_ic{
left: 909px;
top: 390px;
width: 261px;
height: 15px;
position: fixed;
}
#pos_pdc{
left: 909px;
top: 415px;
width: 261px;
height: 15px;
position: fixed;
}
#pos_pe{
left: 909px;
top: 430px;
width: 261px;
height: 15px;
position: fixed;
}
#pos_rda{
left: 909px;
top: 445px;
width: 261px;
height: 15px;
position: fixed;
}
#calc{
top: 88px;
left: 0px;
z-index: 2;
position: fixed;
}
#ima{
z-index: 1;
position: fixed;
} |
