11548 sujets

JavaScript, DOM et API Web HTML5

OnMouseOver : div se ferme lors du survol du contenu

Bonjour à tous et merci d'avance pour votre aide.

Mon problème est le suivant :

j'ai un "onMouseOver" qui change le contenu d'un div mais après le changement, quand la souris survole le div en question, et rencontre un élément (<p>,<li>, ...) il exécute le "onMouseOut" qui est destiner à remettre le contenu initial.

Et donc j'ai un effet instable (clignotant disgracieux)

Merci pour votre aide
En code il n'y a rien d'extraordinaire Smiley cligne mais le voilà :

Voici le CSS

#menu_A,#menu_B{float: left ; height:320px; width:224px;	background-position:center top; background-repeat:no-repeat; }


et voici html qui lance l'action :

<td id="menu_A" background="" width="25%" align="center"><a href="#" onMouseOver="menu_over('menu_A')" onMouseOut="menu_out('menu_A')">TEXTE_A</a></td>

<td id="menu_B" background="" width="25%" align="center"><a href="#" onMouseOver="menu_over('menu_B')" onMouseOut="menu_out('menu_B')">TEXTE_B</a></td>


et voici html qui affiche les DIV :

<!-- MENU_A-->
<div id="menu_A" onMouseOver="menu_over('menu_A')" onMouseOut="menu_out('menu_A')">
</div>
                               
<!-- MENU_B-->
<div id="menu_B" onMouseOver="menu_over('menu_B')" onMouseOut="menu_out('menu_B')">
</div>


et enfin mon java script qui traite l'action :


	function menu_over(info) 
	{ 
		// CHANGE DU TEXTE DANS LE DIV
               ...
               ... ici du AJAX pour recup. le nouveau texte qui doit-être mis dans le DIV
               ... avec comme commande final la ligne ci-dessous
		document.getElementById(info).innerHTML  = http.responseText; 
	} 


	function menu_out(info) 
	{		
		// REMISE TEXTE ORIGINE DANS LE DIV
               ...
               ... ici du AJAX pour recup. le nouveau texte qui doit-être mis dans le DIV
               ... avec comme commande final la ligne ci-dessous
		document.getElementById(info).innerHTML  = http.responseText; 
         }


Je crois que j'ai mis la total ... bon j'ai 4 élément en tout car il y a menu_C et menu_D mais j'ai donner que les codes pour les 2 premiers.

Alors une idée d'où vient le problème ?

Donc pour rappel, le système fonctionne bien sauf que quand la souris passe sur un élément dans le div, il passa a l'action onMouseOut et replace le texte d'origine

MERCI MERCI MERCI Smiley biggrin
aiieee ... je comprend pas trop cet outil Smiley bawling

Quelqu'un sais me donner plus de détails ?
Ou une autre idée ?
Modifié par myauxc (03 Aug 2009 - 20:09)
Le problème c'est que tes onMouseOver / onMouseOut sont appliqués sur tes div et pas sur leur contenu, ce qui créer ce comportement.

Essaie d'appliquer ceci sur l'ensemble de ta div (la div elle-même et le contenu) et normalement ça devrait règler le problème.

Tu ferais bien d'utiliser une librairie js si tu galères, c'est bien plus simple d'utilisation que le javascript "standard".

Je ne peux que te conseiller jQuery. Smiley smile
@ Skoua :

Merci de ta réponse. Mais de quelle manière je peux appliquer mon "onMouseOver / onMouseOut" sur mon DIV (+ son contenu : <p>, <li>, ...) ?
Salut,

Applique le onmouseover sur les éléments dans le div se n'est pas très jolie mais sa devrait fonctioner correctement ex :


<div id="menu_A" onmouseover="javascript:affiche(menu_A); "onmouseout="javascript:masque(menu_A);">
   <p onmouseover="javascript:affiche(menu_A); "onmouseout="javascript:masque(menu_A);">mon texte</p>
</div>



Une autre solution serait d'utiliser comme la dit Skoua, une librairie js, et Jquery et très bien pour ça. regarde sur le site il ya des exemples d'utilisation. si ta un problème pour les utiliser n'hésite pas.

Ben
Merci pour toutes vos idées ...

Mon problème est résolu avec :hover

#menu:hover .contenu .texte {display:none;} // supprime l'affichage du 1er DIV
#menu:hover .contenu .menu {display:block;} // active l'affichage du 2em DIV

@++
Sujet clos
Aller à