Использование наведения мыши для отображения картинки - PullRequest
Новая
       7

Использование наведения мыши для отображения картинки

1 голос
/ 24 октября 2009

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

Ответы [ 3 ]

0 голосов
/ 24 октября 2009

Вы работаете с двумя 'событиями' над тегом привязки, чтобы справиться с этим; 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-код.

0 голосов
/ 24 октября 2009

Хорошо, скажем, вы хотите показать деталь животного с заголовком в другом месте на странице, когда вы наводите указатель мыши на ссылку.

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')"
0 голосов
/ 24 октября 2009

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

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

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

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

...