使用鼠标悬停显示图片答案

【问题标题】：Using mouseover to display a picture使用鼠标悬停显示图片
【发布时间】：2023-03-15 12:52:01
【问题描述】：

我正在尝试向我的网站添加一个脚本，我可以将鼠标悬停在可点击的文本链接上，然后点击带有图片的描述会出现在指定的框位置。请在 Subway 的网站上查看非常相似的内容： http://www.subway.com/applications/Menu/frmMenuPanel.aspx?CC=USA&LC=ENG&MenuID=36

【问题讨论】：

这不是问题，这是“这就是我想做的，为我写代码。”

标签： mouse mouseover

【解决方案1】：

如果只是在 IE 上执行，则可以在图像上使用 mouseover/out 或 mouseenter/leave。

然后，您可以使用zIndex = 1000（或一些较大的数字）使具有绝对位置的 div 可见，以便它位于所有内容之上。

您可能希望在再次隐藏 div 之前使用setTimeout 延迟。

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

【讨论】：

【解决方案2】：

您使用锚标记上的两个“事件”来处理此问题； onemousover 和 onmouseout。然后，您可以在 javascript 中更改所选 div 的 innerHTML 属性。

<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。

【讨论】：

【解决方案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')"

【讨论】：