image - マウスオーバーとマウスアウトの問題にイメージ マップを組み込む

Question

画像を取得しようとしています。マウスをその上に置くと、画像マップが添付された大きな画像が表示されます。ここで見ることができます

それを見てください。ご覧のとおり、マウスをカセット テープの画像の上に置くと、イメージが切り替わりますが、イメージ マップの選択された領域にマウスを置くとすぐに画像が消えます。マウスを画像から離したときにのみ、画像をカセット テープに切り替えて、href 領域では切り替えないようにしたいのです。どうすればこれを修正できますか? それは可能ですか？

Answer 1

jQuery を使った簡単な方法を次に示します。画像ソースを交換する代わりに、2 つの画像を使用するだけで、イベントをより適切に制御できます。

最初の画像は 2 番目の画像と同じサイズであるため、テープまたはメニューが表示される領域にマウスを合わせると、画像が表示されます。ちょうどテープのサイズのイメージを使用する場合、これは起こりません。

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

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