"mouseover" - "onmouseout"

Version imprimable

bonjour a vous voila j'ai un problème avec une fonction onmouseover et onmouseout en fait voila je voudrais evidemment que lorsque la souris soit sur le titre de mon menu celui ci fasse dessendre les sous menu et que lorsqu'il n'y as plus la souris celui ce remonte

voici mon code 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
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
 
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>RCN </title>
	<link href="style.css" type="text/css" rel="stylesheet"/>
</head>
<body>
 
<div id="haut">
<img src="image/banniere.png" alt="banniere"/></div>
</!--></!--></!--></!-->
<div id="menu">
<ul>
    <li><a href="#"><span> A</span>ccueil </a></li>
<table>
 
	<tr>
		<td id="Liens" onmouseover="document.getElementById('GrosTitre1_PetitTitre1').style.display='block';  document.getElementById('GrosTitre1_PetitTitre2').style.display='block';"onMouseout="draw()";"> <li><a href="#"><span> L</span>iens </a></li></td>
 
	<td id="Organisation" onclick="document.getElementById('GrosTitre2_PetitTitre1').style.display='block'; document.getElementById('GrosTitre2_PetitTitre2').style.display='block';"><li><a href="#"><span> O</span>rganisation </a></li</td>
		<td id="Résultats" onclick="document.getElementById('GrosTitre3_PetitTitre1').style.display='block'; document.getElementById('GrosTitre3_PetitTitre2').style.display='block';"><li><a href="#"><span> R</span>ésultats </a></li></td>
	        <td id="Records" onclick="document.getElementById('GrosTitre1_PetitTitre1').style.display='block';  document.getElementById('GrosTitre1_PetitTitre2').style.display='block';"> <li><a href="#"><span> R</span>ecords </a></li></td>
		<td id="Médiathèque" onclick="document.getElementById('GrosTitre1_PetitTitre1').style.display='block';  document.getElementById('GrosTitre1_PetitTitre2').style.display='block';"> <li><a href="#"><span> M</span>édiathèque </a></li></td>
 
<tr/>
 
	<tr>
		<td>
			<span id="GrosTitre1_PetitTitre1" style="display:none;">-Petit Titre 1<br/></span>
			<span id="GrosTitre1_PetitTitre2" style="display:none;">-Petit Titre 2</span>
		</td>
		<td>
			<span id="GrosTitre2_PetitTitre1" style="display:none;">-Petit Titre 1<br/></span>
			<span id="GrosTitre2_PetitTitre2" style="display:none;">-Petit Titre 2</span>
		</td>
		<td>
			<span id="GrosTitre3_PetitTitre1" style="display:none;">-Petit Titre 1<br/></span>
			<span id="GrosTitre3_PetitTitre2" style="display:none;">-Petit Titre 2</span>
		</td>
		<td>
	</tr>
 
<table>
 
 
 
                    </ul>
</div>
</!--></!--></!--></!-->
<div id="titre">
<h2>titre </h2>
</div>
</!--></!--></!--></!-->
<div id="corps">
<p>
</!--></!-->
</p>
</div>
</!--></!--></!--></!-->
<div id="bas">
<p>
 Valid
 <a href="http://validator.w3.org/check?uri=referer">/ xhtml /</a>
<a href=" http://jigsaw.w3.org/css-validator/check/referer"> css2 /</a>
</p>
</div>
</body>
</html>

vous avez constater que la ligne qui me préocuper étais celle ci :

Code:

<td id="Liens" onmouseover="document.getElementById('GrosTitre1_PetitTitre1').style.display='block';  document.getElementById('GrosTitre1_PetitTitre2').style.display='block';"onMouseout="draw()";"> <li><a href="#"><span> L</span>iens </a></li></td>

voila si vous pouviez m'aider ce serais super cool

12/06/2008, 14h04
DoubleU

Dans la console, il me met "draw is not defined" ...
12/06/2008, 14h14
E.Bzz

Bonjour,

Citation:

Envoyé par DoubleU

Dans la console, il me met "draw is not defined" ...

Sans compter les erreurs dans les doubles quottes ;)

A+
12/06/2008, 14h49
DoubleU

C'est pas faux, mais moi il me les mets pas :(
12/06/2008, 15h07
luxb_2000

ben a la limite on oublie mon code !!

comment auriez vous fait a ma place ?
12/06/2008, 15h18
E.Bzz

Citation:

Envoyé par luxb_2000

comment auriez vous fait a ma place ?

Déclarer "draw".
Remettre les quottes dans l'ordre.

;)

A+
12/06/2008, 16h02
luxb_2000

arff j'ai oublier de dire que j'étais noob !!!!

il est possible de me faire un exemple en entier ? svp
12/06/2008, 16h39
tusssss

Citation:

Envoyé par luxb_2000

arff j'ai oublier de dire que j'étais noob !!!!

il est possible de me faire un exemple en entier ? svp

Tu n'as pas besoin d'un exemple, ce n'est qu'une question de logique, des quotes vont toujours par deux, toute quote ouverte doit être refermée à un moment ou un autre, donc ton nombre de double-quotes, c'est à dire ce symbole: " , tu dois en avoir un nombre pair.

Pour ce qui est de draw(), si tu fais appel à une fonction qui n'existe pas, ça ne peut pas fonctionner.
12/06/2008, 17h00
luxb_2000

ok je comprend déjà mieux merci donc pour faire en sort que draw fonction je doit ajouter quoi au code ?
12/06/2008, 18h49
Auteur
Citation:

Envoyé par luxb_2000

ok je comprend déjà mieux merci donc pour faire en sort que draw fonction je doit ajouter quoi au code ?

tu dois créer la fonction draw() :
Code:

1 2 3 4 5 6 7 8 function draw() { /* ton code javascript............. */ }
mais une fonction vide ne fera rien...
12/06/2008, 20h44
luxb_2000

donc si je comprend bien je doit faire : (en gros)

fonction open
{
onmouseover
menu1 --> sous menu1
sous menu 2
}

fonction draw
{
onmouseout
menu1
}

c'est bien ça le schéma ?
12/06/2008, 23h24
Auteur

euh.... tu as déjà fait du javascript ?
12/06/2008, 23h53
luxb_2000

ben non justement c'est bien ça le problème c'est pour ça que je demande si on peut me faire un exemple car je ne comprend pas trop et j'ai regarder des tutos mes ça m'embrouille plus qu'autre chose !:aie:
13/06/2008, 10h07
Auteur

Créer un menu en javascript ce n'est pas ce qu'il y a de plus simple :?
Sinon sur le net tu peux trouver des menus "clef en main".

tu as vu ces cours :
http://javascript.developpez.com/cours/#generalite
http://jacques-guizol.developpez.com/javascript/ :question:

Bonjour ,
donc j'ai réussi t a trouver un tuto assez simple a appliquer mais j'ai encore un problème ( évidemment!)
voici le code 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
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
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<html>
<head>
	<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
	<title>RCN </title>
	<link href="style.css" type="text/css" rel="stylesheet"/>
<script type="text/javascript">
<!--
window.onload=montre;
function montre(id) {
var d = document.getElementById(id);
	for (var i = 1; i<=10; i++) {
		if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
	}
if (d) {d.style.display='block';}
}
//-->
</script>
 
</head>
<body>
 
<div id="haut">
<img src="image/banniere.png" alt="banniere"/></div>
</!--></!--></!--></!-->
<div id="menu">
<ul>
    <li><a href="#"><span> A</span>ccueil </a></li>
<table>
 
 
 
 
<dl>			
		<dt onmouseover="javascript:montre('smenu1');"><li><a href="#"><span> L</span>iens </a></li></dt>
			<dd id="smenu1">
				<ul>
					<li><a href="#">Sous-Menu 1.1</a></li>
 
					<li><a href="#">Sous-Menu 1.2</a></li>
					<li><a href="#">Sous-Menu 1.3</a></li>
					<li><a href="#">Sous-Menu 1.4</a></li>
					<li><a href="#">Sous-Menu 1.5</a></li>
					<li><a href="#">Sous-Menu 1.6</a></li>
				</ul>
 
			</dd>
	</dl>
 
<dl>	
		<dt onmouseover="javascript:montre('smenu2');"><li><a href="#"><span> O</span>rganisation </a></li></dt>
			<dd id="smenu2">
				<ul>
					<li><a href="#">Sous-Menu 2.1</a></li>
					<li><a href="#">Sous-Menu 2.2</a></li>
 
					<li><a href="#">Sous-Menu 2.3</a></li>
					<li><a href="#">Sous-Menu 2.4</a></li>
				</ul>
			</dd>
	</dl>
 
<dl>	
		<dt onmouseover="javascript:montre('smenu3');"><li><a href="#"><span> R</span>ésultats </a></li></dt>
			<dd id="smenu3">
 
				<ul>
					<li><a href="#">Sous-Menu 3.1</a></li>
					<li><a href="#">Sous-Menu 3.2</a></li>
					<li><a href="#">Sous-Menu 3.3</a></li>
					<li><a href="#">Sous-Menu 3.4</a></li>
					<li><a href="#">Sous-Menu 3.5</a></li>
 
				</ul>
			</dd>
	</dl>
<dl>	
		<dt onmouseover="javascript:montre('smenu4');"><li><a href="#"><span> R</span>ecords </a></li></dt>
			<dd id="smenu4">
				<ul>
					<li><a href="#">Sous-Menu 4.1</a></li>
 
					<li><a href="#">Sous-Menu 4.2</a></li>
					<li><a href="#">Sous-Menu 4.3</a></li>
				</ul>
			</dd>
	</dl>
 
 
<dl>	
		<dt onmouseover="javascript:montre('smenu5');"><li><a href="#"><span> M</span>édiathèque </a></li>
 </dt>
			<dd id="smenu5">
				<ul>
					<li><a href="#">Sous-Menu 5.1</a></li>
 
					<li><a href="#">Sous-Menu 5.2</a></li>
					<li><a href="#">Sous-Menu 5.3</a></li>
				</ul>
			</dd>
	</dl>
 
 
	</table>
 
 
 
                    </ul>
</div>
</!--></!--></!--></!-->
<div id="titre">
<h2>titre </h2>
</div>
</!--></!--></!--></!-->
<div id="corps">
<p>
</!--></!-->
</p>
</div>
</!--></!--></!--></!-->
<div id="bas">
<p>
 Valid
 <a href="http://validator.w3.org/check?uri=referer">/ xhtml /</a>
<a href=" http://jigsaw.w3.org/css-validator/check/referer"> css2 /</a>
</p>
</div>
</body>
</html>

mon problème maintenant est que j'ai sur ce tuto un css a mettre dans mes balise "head" que voici :

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
<style type="text/css">
 
body {
margin: 0;
padding: 0;
background: blue;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
top: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
margin: 0 1px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;
}
#menu dd {
border: 1px solid gray;
}
#menu li {
text-align: center;
background: #fff;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}
 
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #ddd;
padding: 5px;
border: 1px solid orange; 
}
 
a {text-decoration: none;
color: grey;
color: #222;
}
 
</style>

et la lors que j'applique ce css évidemment je me retrouve avec la présentation de la page du tuto alors je voulais savoir si quelqu'un pouvais me faire un code css pour adapter a mon site ?

site en aperçus ici :http://ks3710.kimsufi.com/~rcnantai/...n/exemple.html

merci

13/06/2008, 13h45
E.Bzz

Citation:

Envoyé par luxb_2000

alors je voulais savoir si quelqu'un pouvais me faire un code css pour adapter a mon site ?

Et bien faisons plutôt ça dans l'autre sens :
tu adaptes le CSS à ton site, et si tu rencontres des problèmes bloquants, tu pourras trouver les réponses à tes questions précises sur le forum CSS de Developpez ;)

A+