Incorporation d'une image cliquable au problème de mouseover et de mouseout

Question

J'essaie de prendre une image et lorsque vous placez votre souris dessus, une image plus grande apparaît avec une image associée. Vous pouvez le voir here

Jetez un coup d'œil. Comme vous pouvez le voir, lorsque vous passez votre souris sur l'image de la cassette, elle change comme il se doit, mais dès que vous placez votre souris sur les zones sélectionnées dans l'image, l'image disparaît. Je veux que l'image ne revienne sur la cassette que lorsque vous sortez la souris de l'image, mais pas sur la zone href! Comment puis-je corriger cela? Est-ce même possible?

Answer 1

Voici une façon simple de le faire avec jQuery. Au lieu d'échanger la source d'image, il suffit d'utiliser deux images afin de mieux contrôler les événements. Comme la première image a la même taille que la seconde, l'image apparaîtra lorsque vous passez la souris sur la bande ou dans la zone où le menu apparaîtra. Si vous utilisez une image de la taille de la bande, cela n'arrivera pas.

http://jsfiddle.net/7tcaE/2/

$('#tape').bind('mouseover',function() { 
    $('#menu').show(); 
}); 
$('#menu').bind('mouseout',function() { 
    $('#menu').hide(); 
});