マウスオーバーとマウス出力に画像マップを組み込む

Question

私は画像を撮ろうとしています。マウスを上に置くと、画像マップが添付された大きな画像が表示されます。あなたはそれを見ることができますhere

それを見てみましょう。ご覧のように、カセットテープイメージ上にイメージをマウスすると、イメージマップの選択した領域にマウスを置くとイメージが消えます。私はイメージをカセットテープに戻すには、イメージからマウスを離してもhref領域でマウスを動かさないでください！どうすれば修正できますか？それも可能ですか？

Answer 1

ここではjQueryを使って簡単な方法を説明します。イメージソースを交換するのではなく、2つのイメージを使用するだけでイベントをより詳細に制御できます。

最初のイメージは2番目のイメージと同じサイズなので、メニューが表示される領域にテープまたはをマウスで置くとイメージが表示されます。テープのサイズだけの画像を使用すると、これは起こりません。

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

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