comment modifier mon rollover
voila page concerné
http://www.sandrineetgwen.fr/menu.php
Les rollover marche très bien le menu déroulant aussi.
En fait quand on est sur les sous menu le rollover reviens a sa position off. en fait je voudrais qu'il reste en position on tant que l'on visite son sous menu.
Comment je peux faire sachant que je veux que ca fonctionne également sous IE6?
voila le code html avec les rollovers
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
| <html>
<head>
<link rel="stylesheet" href="menu.css" type="text/css" media="screen"/>
<script type="text/javascript">
sfHover = function() {
var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover = function() {
this.getElementsByTagName("ul")[0].style.display = "block";
}
sfEls[i].onmouseout = function() {
this.getElementsByTagName("ul")[0].style.display = "none";
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
</head>
<body>
<div id="second">
<img id="logo" src="image/emeline_rub.jpg" alt="image/emeline_rub" />
<ul id="menuHorizon">
<li><a href="emelinepresentation.html"><img src="image/presentation_rub_off.jpg" alt="image/presentation_rub_on.jpg" class="rollOver" /></a>
<ul>
<li><a href="lesmaries.php">Les futurs mariés</a></li>
<li><a href="lesparents.php">Les parents des mariés</a></li>
<li><a href="lesfrangins.php">Les frangin(e)s</a></li>
<li><a href="lestemoins.php">Les témoins</a></li>
</ul>
</li>
<li><img src="image/oiseau1_rub.jpg" alt="image/oiseau1_rub"/></li>
<li><a href="emelinejourj.html"><img src="image/jourj_rub_off.jpg" alt="image/jourj_rub_on.jpg" class="rollOver" /></a>
<ul>
<li><a href="#">Bob Marley</a></li>
<li><a href="#">Israel Vibration</a></li>
<li><a href="#">Tiken Jah Fakoly</a></li>
</ul>
</li>
<li><img src="image/oiseau2_rub.jpg" alt="image/oiseau2_rub.jpg"></li>
<li><a href="emelineinfospratiques.html"><img src="image/infospratiques_rub_off.jpg" alt="image/infospratiques_rub_on.jpg" class="rollOver" /></a>
<ul>
<li><a href="#">Bob Marley</a></li>
<li><a href="#">Israel Vibration</a></li>
<li><a href="#">Tiken Jah Fakoly</a></li>
</ul>
</li>
<li><img src="image/oiseau3_rub.jpg"alt="image/oiseau3_rub.jpg"/></li>
<li><a href="emelinecontact.html"><img src="image/contact_rub_off.jpg" alt="image/contact_rub_on.jpg" class="rollOver" /></a>
<ul>
<li><a href="#">Bob Marley</a></li>
<li><a href="#">Israel Vibration</a></li>
<li><a href="#">Tiken Jah Fakoly</a></li>
</ul>
</li>
<li><img src="image/oiseau4_rub.jpg"alt="image/oiseau4_rub.jpg"></li>
</ul>
</div>
<script type="text/javascript">
var imgs = document.getElementsByTagName('img');
for (var i = 0; i < imgs.length; i++)
{
if (imgs[i].className == 'rollOver')
{
imgs[i].onmouseover = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
imgs[i].onmouseout = (function() { var a = this.src; this.src = this.alt; this.alt = a; });
imgs[i].className = '';
}
}
</script>
</body>
</html> |
et voila le code du menu deroulant
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
| /**********************************************************
STYLES GENERAUX
**********************************************************/
img {
border: 0;
display: block;
}
#logo {
float: left;
}
/***********************************************************
MENU HORIZONTAL
**********************************************************/
#menuHorizon {
margin-left: 90px;
padding: 0;
margin: 0;
}
#menuHorizon li {
position: relative;
float: left; /* mes les boutons sur la gauche*/
list-style: none;
font-family: Arial, Helvetica, sans-serif;
text-decoration: none;
}
#menuHorizon li a { /* sous menu of*/
display: block;
line-height: 25px;/* hauteur de chaques boutons des sous menus*/
text-decoration: none;
color: green;/* couleur de la police*/
}
#menuHorizon li a:hover{ /* sous menu on*/
background-color: black;/* couleur du fond du sous menu en on*/
color: pink; /* couleur de la police sous menu en on*/
}
#menuHorizon li ul {
position: absolute;
display: none;
left: 0; /* deplace les sous menu vers la droite*/
padding: 0;/* marge a l'interieur des sous menus vers les bord*/
margin: 0;
border: 1px solid #000;
}
#menuHorizon li:hover > ul {
display: block;
}
#menuHorizon li ul li {
float: none;
width: 150px;/* largeur des sous menu*/
}
#menuHorizon li ul li a {
padding: 0 5px; /* hauteur et largeur de l'ensemble de sous menu*/
} |
merci par avance de votre aide
