Использование mouseover для отображения изображения

Question

Я пытаюсь добавить скрипт на свой сайт, где я могу навести на него текстовую ссылку, а затем щелкнуть описание с изображением в указанном поле. Пожалуйста, посмотрите что-то очень похожее на сайте Subway: http://www.subway.com/applications/Menu/frmMenuPanel.aspx?CC=USA&LC=ENG&MenuID=36

Answer 1

На изображении вы можете использовать либо мышь/выезд, либо центр мыши/оставить, если просто сделать это на IE.

Вы можете сделать видимым div, который имеет абсолютное положение, с zIndex = 1000 (или некоторое количество), чтобы он был поверх всего.

Возможно, вы захотите использовать setTimeout, чтобы задержать, прежде чем снова спрятать div.

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

Answer 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 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')"