mouse - マウスオーバーを使用して画像を表示する

Question

クリック可能なテキスト リンクにマウスを合わせることができるスクリプトをサイトに追加しようとしています。クリックする前に、画像付きの説明が指定されたボックスの場所に表示されます。サブウェイのサイトで非常によく似たものをご覧ください: http://www.subway.com/applications/Menu/frmMenuPanel.aspx?CC=USA&LC=ENG&MenuID=36

Answer 1

これを処理するには、アンカータグで2つの「イベント」を操作します。onemousoverおよびonmouseout。次に、javascriptでinnerHTML、選択したdivのプロパティを変更できます。

<div id="myDiv">
  Description
</div>
<a href="#" onmouseover="document.getElementById('myDiv').innerHTML = '<b>replaced txt</b>';"
            onmouseout="document.getElementById('myDiv').innerHTML = 'Description';">Wave</a>

挿入する画像または任意のHTMLを指定できます。

Answer 2

画像では、IE で実行する場合は、mouseover/out または mouseenter/leave のいずれかを使用できます。

次に、(またはいくつかの大きな数) を使用して、絶対位置を持つ div を表示して、zIndex = 1000すべての上に表示することができます。

setTimeoutdiv を再び非表示にする前に遅延させるために使用したい場合があります。

http://www.quirksmode.org/js/events_mouse.html

Answer 3

さて、サムネイル リンクにカーソルを合わせたときに、ページの別の場所に動物の詳細とタイトルを表示したいとします。

1> 大きな画像の名前とラベルの配列を作成します。

var images=['cow_face.jpg','cat_tail.jpg','bat_ear.jpg'];
var image_labels=['A Holstein snacking','A sniddly cat','A listening bat'];

2>スイッチング機能を設定する

function switch(new_im_number){
 var zoom_img=document.getElementbyId('zoom_area');
 var label=document.getElementById('img_label');
 if(zoom_area==null || label==null){ return false; }

 zoom_img.src=images[new_im_number];
 label.innerHTML=image_labels[new_im_number];
 }

3> html を設定します。

<a href='cow.html'><img id='im_0' onmouseover='switch(0)' src='cow.jpg'></a><br>
<a href='cat.html'><img id='im_1' onmouseover='switch(1)' src='cat.jpg'></a><br>
<a href='bat.html'><img id='im_2' onmouseover='switch(2)' src='bat.jpg'></a><br>
<br>
<img id='zoom_area' src='blank.jpg'><br>
<span id='img_label'>No Zoom Yet</span>

画像の配列の代わりにオブジェクトを作成し、配列のキー番号の代わりに単語を使用してそれぞれを取得することもできます。

var images={'bat':'bat_lg.jpg','cat':'cat_face.jpg','sandwich':'grilled_cheese.jpg'};

そして、あなたのfunc呼び出しは

onmouseover="switch('bat')"