comment modifier mon rollover

**gaya_102** · 10/03/2009, 11h44

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 :

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
<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 :

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
/**********************************************************
				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

**devyan** · 10/03/2009, 12h04

Salut,

Vu ton code, ton problème n'est pas CSS mais JAVASCRIPT...

Ceci dit, avec ta méthode, il suffit de forcer le changement "_on" lorsque tu ouvres le sous menu et inversement...

**gaya_102** · 10/03/2009, 12h07

désole je suis débutante et je ne vois pas comment je dois faire

**devyan** · 10/03/2009, 12h35

Il faudrait faire quelque chose du genre...

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
    <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() {

           var titre = sfEls[i].getElementsByTagName("a")[0];
            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

            this.getElementsByTagName("ul")[0].style.display = "block";
        }
        sfEls[i].onmouseout = function() {

            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

           var titre = sfEls[i].getElementsByTagName("a")[0];
            this.getElementsByTagName("ul")[0].style.display = "none";
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
   </script>

devrai focntionner

**gaya_102** · 10/03/2009, 14h29

alors j'ai remplacé mon script par le tien et du coup le menu ne marche plus
snif

**devyan** · 10/03/2009, 14h35

Oui je suis allé un peu vite mais si je fais tout c'est pas amusant non ?

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
    <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() {

           var titre = this.getElementsByTagName("a")[0];
            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

            this.getElementsByTagName("ul")[0].style.display = "block";
        }
        sfEls[i].onmouseout = function() {

            var a = titre.src; titre.src = titre.alt; titre.alt = a; 

           var titre = this.getElementsByTagName("a")[0];
            this.getElementsByTagName("ul")[0].style.display = "none";
        }
    }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
   </script>

ça devrai être mieux avec "this"

**gaya_102** · 10/03/2009, 14h42

Alors ca ne marche pas. je te donne le lien pour que tu vois ce que ca donne

http://www.sandrineetgwen.fr/emelinejourj.php

**devyan** · 10/03/2009, 14h59

Effectivement (suis-je bête? désolé)

1/ je me suis un peu précipité et n'ai pas fait attention que les évènements du rollover sont positionnés sur les images (pas les liens comme je l'ai cru)

2/ du coup en repartant de ta solution initiale, ils suffirait de placer le rollover sur le "<li>" qui contient <a><img src="tonimagetitre"/></a> .

Puisque le menu déroulant est également dedans, tu n'en sort pas tant qu'il est ouvert... donc le tour est joué.

=>

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
<script type="text/javascript">
    var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
    for (var i=0; i<sfEls.length; i++) {
         sfEls[i].onmouseover = (function() { 
               var href = this.getElementsByTagName('a')[0];
               var img = href.getElementsByTagName('img');
               var a = this.src; this.src = this.alt; this.alt = a; });
         sfEls[i].onmouseout = (function() { 
               var href = this.getElementsByTagName('a')[0];
               var img = href.getElementsByTagName('img');
               var a = this.src; this.src = this.alt; this.alt = a; });
 
    }
 
</script>

Le test sur className devient à priori inutile vu que l'on scanne une structure connue <li><a><img/></a> ... </li>

**gaya_102** · 10/03/2009, 15h34

tu dit de mettre rollovers dans le li mais c'est deja fait si je ne me trompe pas voila le code html

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
<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="prestataires.php">Les prestataires</a></li>
	  <li><a href="deroulement.php">Le déroulement</a></li>
	  <li><a href="voyage.php">Le voyage de noce</a></li>
	  <li><a href="liste.php">La liste de mariage</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="commentvenir.php">Comment venir</a></li>
	  <li><a href="hebergement.php">Hébergement</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>

**devyan** · 10/03/2009, 15h44

Oui partiellement... (il faut que j'arrête de faire 3 choses à la fois moi ... ^^)

On va finir par y arriver, pas d'inquiétude

donc récapitulons :
- tu as 2 gestions de rollover dans ton code initial :
* sur les li pour afficher le sous menu
* sur les img pour changer l'image

Il faut en fait tout mettre dans le rollover des li.
C'est quand tu survoles ton li que tu change l'image des img ET que tu fais apparaître le sous menu.

Nous arrivons donc à la solution suivante :

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
 
    sfHover = function() {
        var sfEls = document.getElementById("menuHorizon").getElementsByTagName("li");
        for (var i=0; i<sfEls.length; i++) {
            sfEls[i].onmouseover = function() {
               // échange des images
               var href = this.getElementsByTagName('a')[0];
               var img = href.getElementsByTagName('img');
               var a = this.src; this.src = this.alt; this.alt = a; });
 
               // affichage du sous-menu
                this.getElementsByTagName("ul")[0].style.display = "block";
            }
            sfEls[i].onmouseout = function() {
               // échange des images
               var href = this.getElementsByTagName('a')[0];
               var img = href.getElementsByTagName('img');
               var a = this.src; this.src = this.alt; this.alt = a; });
 
               // affichage du sous-menu
                this.getElementsByTagName("ul")[0].style.display = "none";
            }
        }
    }

**gaya_102** · 10/03/2009, 15h58

mais mes images sont deja dans un li
desole je debute et vraiment du mal a comprendre

**devyan** · 10/03/2009, 16h10

Je vais essayer de faire un croquis pour expliquer

== : LI; A : A; XX : IMG; ** : UL

Affichage normal :
+===================+
|...................................|
|..AXXXXXXXXXXXXXXXA..|
|...................................|
+===================+

Affichage lors du survol :
+===================+
|...................................|
|..AXXXXXXXXXXXXXXXA..|
|...................................|
|..+***************+..|
|..|............................|..|
|..|............................|..|
|..|............................|..|
|..|............................|..|
|..|............................|..|
|..+***************+..|
|...................................|
+===================+

Donc lorsque tu survoles l'image tu es déjà en train de survoler le LI.
Il n'est donc pas nécessaire de séparer les 2, bien au contraire puisque tu veux garder l'image "menu sélectionné" lorsque tu survole le sous-menu (UL)

**desert** · 10/03/2009, 16h27

Le sous-menu se replie uniquement sous IE6 ou aussi sur les autres navigateurs que tu possèdes ?

**devyan** · 10/03/2009, 16h30

Envoyé par desert

Le sous-menu se replie uniquement sous IE6 ou aussi sur les autres navigateurs que tu possèdes ?

Ce n'est pas le menu déroulant le pb mais le rollover des images du menu horizontal.

**desert** · 10/03/2009, 17h13

Oui, j'avais mal compris le problème. Où sont mes lunettes ?

Dans ce cas, ta solution me paraît bonne. Je changerais juste ceci :

Code javascript :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
var img = this.getElementsByTagName('img')[0];
var src = img.src; img.src = img.alt; img.alt = src;

**gaya_102** · 11/03/2009, 09h35

merci de ta réponse je pourrai malheureusement que tester vendredi car je dois partir pendant 2 jours. je te tiens au courant . Merci encore

**gaya102** · 18/03/2009, 09h02

bon voila j'ai fais les modifs que tu m'avais dit de faire
sous firefox rien n'a changer mais sous ie les sous menu ne disparaissent plus.

comment modifier mon rollover

JavaScript

Discussions similaires

Partager

Partager