Включение карты изображений при наведении курсора мыши

Question

Я пытаюсь сделать снимок, и когда вы наводите на него мышью, появляется увеличенное изображение с прикрепленной к нему картой. Вы можете просмотреть его здесь

Взгляни на это. Как вы можете видеть, когда вы наводите курсор мыши на изображение с кассеты, оно переключается, как и должно быть, однако, как только вы наводите указатель мыши на выделенные области на карте изображения, изображение исчезает. Я хочу, чтобы изображение снова переключалось на кассету, только когда вы убираете мышь с изображения, а не в области href! Как я могу это исправить? Это вообще возможно?

Answer 1

Вот простой способ сделать это с помощью jQuery. Вместо замены источника изображения просто используйте два изображения, чтобы лучше контролировать события.

Поскольку первое изображение имеет тот же размер, что и второе, оно появится, если навести курсор мыши на ленту или в области, где появится меню. Если вы используете изображение размером с ленту, этого не произойдет.

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

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