Evenements mouse et cadres

Bonjour,

j'ai un petit problème avec du javascript associé à un cadre DIV.

j'ai voulu créer un cadre qui change lorsque l'on passe dessus. Pour cet effet, j'ai en fait utilisé 2 cadres différents. L'un des 2 est toujours caché, c'est donc une alternance entre ces 2 cadres :
- le premier contient simplement une image qui fait office de fond et un texte superposé à l'image
- le deuxième contient la même image et superposé un cadre qui contient 2 liens. Chacun de ces liens prend la moitié gauche ou droite du cadre.

Cela fonctionne mais il reste un petit problème. Lorsque je passe entre les 2 liens (gauche et droit), l'événement onmouseout s'execute et je vois pendant une fraction de seconde le titre de la rubrique. Et pire, si je vais doucement et j'arrive à me positionner juste sur la limite des 2 liens, le onmouseout s'execute et pas le onmousover derrière alors que les évenements sont fixés sur le cadre général et pas sur les liens...

Voici le code html

<!-- cadre contenant le nom de la rubrique -->
<div ID="sb1"  CLASS="rubriqueMenu" onmouseover="afficherSousRubrique('sb');"><IMG SRC="images/Background2.jpg" CLASS="fondMenu"><P CLASS="titreRubrique">RUBRIQUE</P></div>

<!-- cadre contenant les liens sous rubrique -->
<div ID="sb2" CLASS="rubriqueMenu" STYLE="display:none;" onmouseout="cacherSousRubrique('sb')"><IMG SRC="images/Background2.jpg" CLASS="fondMenu"><div STYLE="position:relative;margin-top:-120px;width:100%;height:120px;">
	<A HREF="..." 		CLASS="sousRubriqueMenu" STYLE="width:49%;height:98%;padding-top:50px;">gauche</A>
	<A HREF="..." CLASS="sousRubriqueMenu" STYLE="width:49%;height:98%;padding-top:50px;">droite</A>
	</div>
</div>

le CSS

.rubriqueMenu{width:48%;height:120px;display:inline;}
.sousRubriqueMenu{display:inline;}
.fondMenu { width:100%;height:100%;display:inline;}

et le javascript

function afficherSousRubrique(debutId){
	document.getElementById(debutId+"1").style.display="none";
	document.getElementById(debutId+"2").style.display="inline";
}
	
function cacherSousRubrique(debutId){
	document.getElementById(debutId+"1").style.display="inline";
	document.getElementById(debutId+"2").style.display="none";
}

Modifié par d0m (23 Nov 2007 - 15:04)

d0m a écrit :
Bonjour,
le onmouseout s'execute et pas le onmousover derrière

Bonjour,
C'est normal que onmouseout réagit au survol des liens situés par dessus ton fond et c'est sur ceux-ci qu'il faut appliquer onmouseout

a écrit :

alors que les évenements sont fixés sur le cadre général et pas sur les liens...

Justement c'est sur les liens que les évènements doivent être attachés pour permettre l'accès au clavier.

Et puis, il faudrait reconsidérer ton menu à 2 niveaux avec une liste non ordonnée, accessible sans javascript et au clavier.
Ne pas utiliser d' attribut style.
Utiliser plutôt background-image pour l'mage en arrière plan.
Eviter le javascript intrusif pour la partie dynamique et penser à la version clavier (onfocus).

chmel a écrit :

Bonjour,
C'est normal que onmouseout réagit au survol des liens situés par dessus ton fond et c'est sur ceux-ci qu'il faut appliquer onmouseout

Le problème reste le même, il y a le même comportement.

chmel a écrit :

Et puis, il faudrait reconsidérer ton menu à 2 niveaux avec une liste non ordonnée, accessible sans javascript et au clavier.
Ne pas utiliser d' attribut style.

C'est pour une application interne, pas pour le web et donc très ciblée. L'accessibilité n'a pas vraiment lieu d'être.

chmel a écrit :

Utiliser plutôt background-image pour l'mage en arrière plan.

j'aurai tant aimé mais je n'ai pas trouvé le moyen d'étirer une image par l'attribut background-image sous IE6.