"mouseover" - "onmouseout"

**luxb_2000** · 12/06/2008, 13h04

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 :

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

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

<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

**DoubleU** · 12/06/2008, 14h04

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

**E.Bzz** · 12/06/2008, 14h14

Bonjour,

Envoyé par DoubleU

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

Sans compter les erreurs dans les doubles quottes

A+

**DoubleU** · 12/06/2008, 14h49

C'est pas faux, mais moi il me les mets pas

**luxb_2000** · 12/06/2008, 15h07

ben a la limite on oublie mon code !!

comment auriez vous fait a ma place ?

**E.Bzz** · 12/06/2008, 15h18

Envoyé par luxb_2000

comment auriez vous fait a ma place ?

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

A+

**luxb_2000** · 12/06/2008, 16h02

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

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

**tusssss** · 12/06/2008, 16h39

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.

**luxb_2000** · 12/06/2008, 17h00

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

**Auteur** · 12/06/2008, 18h49

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 :

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

1
2
3
4
5
6
7
8
 
function draw()
{
/* ton code javascript............. */
 
 
 
}

mais une fonction vide ne fera rien...

**luxb_2000** · 12/06/2008, 20h44

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 ?

**Auteur** · 12/06/2008, 23h24

euh.... tu as déjà fait du javascript ?

**luxb_2000** · 12/06/2008, 23h53

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 !

**Auteur** · 13/06/2008, 10h07

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/

**luxb_2000** · 13/06/2008, 13h39

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 :

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

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

**E.Bzz** · 13/06/2008, 13h45

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+

"mouseover" - "onmouseout"

JavaScript

Partager

Partager