OnMouseOver 有效，但小缩略图仅保持为红色 X - 如何显示缩略图？
我使用以下内容，以便网站访问者可以单击缩略图（在本例中称为 tn_guinness-label.jpg），当他们单击时，会出现更大的图像（在本例中称为 guinness-label.jpg）。所以......我尝试了一下，我所能看到的只是一个小盒子，里面有一个红色X，当我将鼠标悬停在红色X上时，它按预期工作并向我显示了更大的图像。
为什么在我将鼠标悬停之前它不显示缩略图？ 另外，当我完成鼠标悬停并将鼠标移开后，我就可以实际看到缩略图，然后该缩略图仍保留在视图中。所以......我做错了什么，因为缩略图最初没有显示，只有在我完成鼠标悬停后才显示。感谢您的帮助。以下是我正在使用的内容（aspx 页面...带有 Visual web Developer 免费版本）
<script language="javascript" type="text/javascript"> </script>
<table style="border:solid black 1px;font-size:12pt; font-family:verdana">
<tr>
<td>
<img alt="Guiness Advert" id="guiness" name="guiness" src="~/folder1/folder2/folder2//tn_guinness-label.jpg" onmouseover="document.guiness.src ='guinness-label.jpg';" onmouseout="document.red.src ='tn_guinness-label.jpg';" />
</td>
<td>
<div>Guiness Label</div>
</td>
</tr>
</table>
如果无法给出上述解决方案，我很高兴收到有关如何在缩略图上实现鼠标悬停效果的任何信息，在aspx 页面。非常感谢。
丽莎·麦克
I'm using the following so that site visitors can click on a thumbnail (in this case its called tn_guinness-label.jpg) and when they do click, a larger image appears (in this case called guinness-label.jpg). So.... I tried it and all I could see was a tiny box with a red X inside, and when I hovered my mouse over the red X, it worked as it should and showed me the larger image.
Why didn't it show me the thumbnail before I did mouseover?
Plus, after I had completed the mouseover and then took my mouse away, I could then actually see the thumbnail image, which then stayed on view. So.... what am I doing wrong because the thumbnail did not show initially, it only showed after I had completed the mouseover. Thank you for your help. The following is what I'm using (aspx pages... with Visual web Developer free version)
<script language="javascript" type="text/javascript"> </script>
<table style="border:solid black 1px;font-size:12pt; font-family:verdana">
<tr>
<td>
<img alt="Guiness Advert" id="guiness" name="guiness" src="~/folder1/folder2/folder2//tn_guinness-label.jpg" onmouseover="document.guiness.src ='guinness-label.jpg';" onmouseout="document.red.src ='tn_guinness-label.jpg';" />
</td>
<td>
<div>Guiness Label</div>
</td>
</tr>
</table>
If solution cannot be given for the above, I'm happy to receive any info whatsoever on how to achieve mouseover effects on a thumbnail, in aspx pages. Many thanks.
LisaMac
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
带有红色 X 的框是 IE（假设您使用的是 IE）指示丢失图像的方式。
检查 img 标签中缩略图的路径是否正确。
当您离开图像时出现它的原因是 OnMouseOut 事件具有到图像的正确路径。
我注意到你的开头有一个“~”。您的意思是从应用程序的根目录还是当前文件夹进行搜索？
The box with the red X is the way IE (assuming you are using IE) indicates a missing image.
Check that the path to your thumbnail image in your img tag is correct.
The reason it appears when you leave the image is that the OnMouseOut event has the correct path to the image.
I notice that you have a "~" at the start. Do you mean to search from the root of the application or the current folder?
您是否将图像保存在
./~/folder1/folder2等目录中？您不是指
document.getElementById('guiness').src（或其他什么吗？）？Do you keep image in
./~/folder1/folder2etc directory?And didn't you mean
document.getElementById('guiness').src(or whatever it is?)?似乎有两个问题。
一个。 .src 的一致性
，例如它应该是所有实例中的完整路径，例如：
document.guiness.src ='folder1/folder2/folder2/guinness-label.jpg"
b. 使用 document.guiness.src 的一致性，
例如在 mouseout 中它是：
document.red.src
There seem to be two issues.
a. Consistency of your .src
eg it should be the full path in all instances like:
document.guiness.src ='folder1/folder2/folder2/guinness-label.jpg"
b. Consistency of using document.guiness.src
eg in the mouseout it is:
document.red.src