Probleme avec "onmouseover"

je ne sait pas ou mettre onmouseout dans le code

Sujet résolu

Anonyme

15 décembre 2008 à 19:53:35

Salut a tous, alors voila j'ai trouvé un menu en JS sur internet et j'aimerai l'utiliser sur le site que je fait en projet pour mon lycée (un site d'aide en micro informatique)

mais j'ai un petit problème, en fait le code initial étais fait a base de "onclick" donc il fallait cliquer sur la section du menu pour ouvrir les sous menus mais la j'ai remplacé par onmouseover et le rendu n'est pas tout a fait comme je le voulais.

quand je passe la souris sur un element du menu les sous-menus s'ouvre mais ne se referment pas quand la souris ne le pointe plus.

voici mon code:

<SCRIPT LANGUAGE="JavaScript">

var txt=new Array () ;

txt[1]='<li><a href="configuration_type/gamer.html">Gamer</a></li><li><a href="configuration_type/bureautique.html">Bureautique</a></li><li><a href="configuration_type/loisirs.html">Loisir</a></li><li><a href="configuration_type/montagepv.html">Photos/Video</a></li><br/>';
txt[2]='<a href="page372.htm">test5</a><br><a href="page56.htm">test675</a><br/>';
txt[3]='<a href="page3.htm">test5</a><br><a href="page6.htm">test65</a><br/>';
txt[4]='<a href="page99.htm">test55</a><br><a href="page65.htm">test655</a><br/>';
txt[5]='<a href="page45.htm">test555</a><br><a href="page655.htm">test6555</a><br/>';
txt[6]='<a href="page84.htm">test5555</a><br><a href="page6555.htm">test65555</a><br/>';

function menu(id)
{
ref=document.getElementById(id);
if (ref.innerHTML== "....")
ref.innerHTML = txt[id];
else
ref.innerHTML= "....";
}

</SCRIPT>
 
   </head>
   <body>
        <div id="en_tete">
		
		</div>
 
        <div id="menu">
		
			<li><a href=# "">Page d'acceuil</a></li>
			<br/>
			<li><a href=# onmouseover="menu(1);">Configurations Types</a></li>
			<DIV id=1>....</DIV>

			<li><a href=# onmouseover="menu(2);">Monter son PC</a></li>
			<DIV id=2>....</DIV>

			<li><a href=# onmouseover="menu(3);">Installation</a></li>
			<DIV id=3>....</DIV>

			<li><a href=# onmouseover="menu(4);">Conseils</a></li>
			<DIV id=4>....</DIV>

			<li><a href=# onmouseover="menu(5);">Périphériques</a></li>
			<DIV id=5>....</DIV>

j'aimerai que vous me dites comment faire pour placer les "onmouseout" pour avoir le résultat désiré

merci d'avance =)

ps: j'ai des connaissances très limitées en JS...

Tillertan

15 décembre 2008 à 20:36:53

<script type="text/javascript">

var txt = new Array();
var lastId = false;

txt[1] = '<li><a href="configuration_type/gamer.html">Gamer</a></li><li><a href="configuration_type/bureautique.html">Bureautique</a></li><li><a href="configuration_type/loisirs.html">Loisir</a></li><li><a href="configuration_type/montagepv.html">Photos/Video</a></li><br/>';
txt[2] = '<a href="page372.htm">test5</a><br><a href="page56.htm">test675</a><br/>';
txt[3] = '<a href="page3.htm">test5</a><br><a href="page6.htm">test65</a><br/>';
txt[4] = '<a href="page99.htm">test55</a><br><a href="page65.htm">test655</a><br/>';
txt[5] = '<a href="page45.htm">test555</a><br><a href="page655.htm">test6555</a><br/>';
txt[6] = '<a href="page84.htm">test5555</a><br><a href="page6555.htm">test65555</a><br/>';

function menu(id)
{
	ref = document.getElementById('hide' + id);
	
	if (lastId != false)
		document.getElementById('hide' + lastId).innerHTML = '.....';
	
	lastId = id;
	
	ref.innerHTML = txt[id];
}

</script>
 
   </head>
   <body>
        <div id="en_tete">
		
		</div>
 
        <div id="menu">
		
			<li><a href="#">Page d'acceuil</a></li>
			<br/>
			<li><a href="#" onmouseover="menu(1)">Configurations Types</a></li>
			<DIV id="hide1">....</DIV>

			<li><a href="#" onmouseover="menu(2)">Monter son PC</a></li>
			<DIV id="hide2">....</DIV>

			<li><a href="#" onmouseover="menu(3)">Installation</a></li>
			<DIV id="hide3">....</DIV>

			<li><a href="#" onmouseover="menu(4)">Conseils</a></li>
			<DIV id="hide4">....</DIV>

			<li><a href="#" onmouseover="menu(5)">Périphériques</a></li>
			<DIV id="hide5">....</DIV>

Anonyme

15 décembre 2008 à 22:00:08

impeccable ça marche très bien merci^^

par contre avec onmouseover c'était galère, j'ai donc remis en onclick mais c'est mieux qu'au départ =)

grâce a toi j'aurai une super note merci^^

Tillertan

15 décembre 2008 à 22:06:55

Comme ça a l'air d'être un truc noté, quelque conseil pour la suite:
- Toujours écrire les tags en minuscules (<DIV> => <div>)
- Toujours écrire les arguments en minuscules (LANGUAGE="JavaScript" => language="javascript")
- Toujours mettre des quotes aux arguments (href=# => href="#")

Voila, ces petits truc n'altéreront en général pas le fonctionnalité du code, mais c'est une question de principe, pour faire un code lisible =)