[Résolu] Légende coulissante en javascript: problème au survol

Bonjour,
je mets en place un système de légende coulissante sur un site de présentation de photo. Je fais ça en javascript (sans jquery). Je me suis inspiré de ce qui existe sur le site du journal Le Monde: Au survol de l'image par la souris (onmouseover) un panneau coulissant contenant la légende de l'image apparait par le bas, il prend toute la largeur de l'image. Quand le pointeur de la souris n'est plus au dessus de l'image (onmouseout) le panneau redescendant et disparait.
Ça fonctionne correctement sauf que je me heurte à problème inattendu: lorsque la souris effectue son survol par le bas de l'image, le panneau contenant la légende coulisse, arrive au niveau du pointeur de la souris et alors tout se passe comme si l'événement onmouseout se déclenchait.
Le pointeur est toujours au dessus de l'image mais tout se passe comme si la légende coulissante s'interposait entre le pointeur de la souris et l'image et que le navigateur considérait que le pointeur avait quitté l'image.

Voici la structure HTML pour les images présentées:

<div id="photos">
<table>
<tr>
<td>
<figure>
<img id="I9" class="img" alt="" src="/fredlast/images/galeries/page5/1.jpg">
<figcaption data-source="9">Ceci est la légende de la photo</figcaption>
</figure>
</td>
</tr>
</table>
</div>

Le css associé:

figure {
	margin: 0 20px 0 0;
	position: relative;
	overflow: hidden;
}
	
figcaption {
	-moz-box-sizing: border-box;
	position: absolute;
	left: 0;
	bottom: 0;
	display: none;
}

figcaption.visible {
	display: block;
	background: none repeat scroll 0 0 rgba(0, 0, 0, 0.65);
	padding: 5px 10px;
	color: #FFFFFF;
	width: 100%;
	text-align: center;
}

Et enfin le code javascript. Pour l'effet coulissant j'utilise la librairie Tweenjs en jouant sur la hauteur (propriété height) de la balise figcaption. Je passe aussi le display de la même balise de none à block au moment du survol.

 function init () {
//mise en place du gestionnaire d'événement sur la balise figure (même comportement si on le met sur la balise img)
  var f = document.getElementById("photos").getElementsByTagName("figure");

 for (var y = 0; y < f.length; y++)
      {
f[y].addEventListener ? f[y].addEventListener("mouseover", affichLegendes, false) : f[y].attachEvent ? f[y].attachEvent("onmouseover", affichLegendes) : (f[y].onmouseover = affichLegendes);
        }
}

 function affichLegendes (event) {
    	event = event || window.event;
    	var cible = event.target || event.srcElement;
    	var figcaption = cible.parentNode.getElementsByTagName("figcaption");
    	figcaption[0].className = 'visible';
    	var h = figcaption[0].offsetHeight;
    	var effet = new Tween(figcaption[0].style, "height", Tween.StrongEaseIn, 0, h, 0.1, "px");
    	effet.start();
	    cible.addEventListener ? cible.addEventListener("mouseout", desaffichLegendes, false) : cible.attachEvent ? cible.attachEvent("onmouseout", desaffichLegendes) : (cible.onmouseout = desaffichLegendes);
    }

function desaffichLegendes (event) {
    	event = event || window.event;
    	var cible = event.target || event.srcElement;
    	var figcaption = cible.parentNode.getElementsByTagName("figcaption");
    	var h = figcaption[0].offsetHeight;
    	var effet = new Tween(figcaption[0].style, "height", Tween.StrongEaseIn, h , 0, 0.1, "px");
    	var effet2 = new Tween(figcaption[0].style, "paddingTop", Tween.StrongEaseIn, 5 , 0, 0.1, "px");
    	var effet3 = new Tween(figcaption[0].style, "paddingBottom", Tween.StrongEaseIn, 5 , 0, 0.1, "px");
    	effet.start();
    	effet2.start();
    	effet3.start();
    	function nettoyage(){figcaption[0].removeAttribute("class");figcaption[0].removeAttribute("style");}
    	setTimeout(nettoyage, 200);
    }

Voilà, si quelqu'un a une piste je suis preneur....
Merci d'avance
Modifié par moreall (24 Jun 2013 - 13:58)

Bon j'ai fini par trouver. Il faut se servir de la propriété relatedTarget de l'objet Event qui permet de détecter vers quel élément le pointeur se dirige ou de quel élément il provient. Dans le cas de l'événement mouseover, relatedTarget permet détecter la provenance du curseur, dans le cas de mouseout, relatedTarget détecte la destination du pointeur. Il ne reste plus qu'à exécuter ou non le code en fonction de sa provenance ou de sa destination.
Tout ceci est expliqué en détail sur le Site du Zéro: http://www.siteduzero.com/informatique/tutoriels/dynamisez-vos-sites-web-avec-javascript/resoudre-les-problemes-d-heritage-des-evenements