javascript 另一个位置的鼠标悬停图像弹出图像
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/16572831/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
mouseover image popup image at another location
提问by Jason Sutphin
I have a column of buttons that have to do the same thing as the first button but with there own individual pics. How do I set the id so that there's no glitches? Here is what I have so far http://ultimatefinishdetailing.com/Services.html
我有一列按钮必须和第一个按钮做同样的事情，但有自己的个人照片。如何设置 id 以免出现故障？这是我到目前为止所拥有的http://ultimatefinishdetailing.com/Services.html
HTML: (posted HTML BEFORE on the image button)
HTML：（在图像按钮上发布 HTML 之前）
<STYLE MEDIA="screen" TYPE="text/css">
.pop-up {
height: 100px;
width: 100px;
margin-right: -100px;
margin-top: -100px;
position:absolute;
right:-50px;
top:75px;
}
.button {
width:300px;
height:21px;
display:block; background-image:url(images/button_ufad4.jpg);
position:absolute;
}
</style>
<a href="" class="button" onmouseover="javascript:ShowImage('images/InteriorandExteriorDetailing.jpg')" onmouseout="javascript:HideImage()"></a>
<div id="popup" class="pop-up">
<img id="popupImage" alt="Popup image" />
</div>
Javascript:
Javascript：
<script type="text/javascript">
function ShowImage(src)
{
var img = document.getElementById('popupImage');
var div = document.getElementById('popup');
img.src = src;
div.style.display = "block";
}
function HideImage()
{
document.getElementById('popup').style.display = "none";
}
</script>
回答by Developer Gee
Nishant is correct for the mouseout, you are just missing the first single quote.
Nishant 对 mouseout 是正确的，您只是缺少第一个单引号。
For the style you would probably want something like this
对于这种风格，你可能想要这样的东西
<style media="screen" type="text/css">
.pop-up {
height: 200px;
width: 100px;
margin-right: 100px;
margin-top: -10px;
position:absolute;
right:50px;
top:50px;
}
</style>
The position: absolute; will tell the browser to put it exactly where you want it. In this example I told it to position itself 50px from the top and 50px from the right. You can also use the keywords "bottom" and "left".
位置：绝对；会告诉浏览器把它放在你想要的地方。在这个例子中，我告诉它把自己定位在距离顶部 50 像素和距离右侧 50 像素的位置。您还可以使用关键字“底部”和“左”。
回答by Josh Balcitis
Here try this...
在这里试试这个...
CSS
CSS
<style>
.pop-up {
height: 200px;
width: 100px;
margin-right: 100px;
margin-top: 10px;
float: right;
display:none;
}
.button {
/*change the width and height to match button.jpg's*/
width:50px;
height:50px;
display:block;
background-image:url(image/button.jpg);
}
</style>
HTML
HTML
<a href="" class="button" onmouseover="javascript:ShowImage('images/eco.jpg')" onmouseout="javascript:HideImage()"></a>
<div id="popup" class="pop-up">
<img id="popupImage" alt="Popup image" />
</div>
JavaScript
JavaScript
<script type="text/javascript">
function ShowImage(src)
{
var img = document.getElementById('popupImage');
var div = document.getElementById('popup');
img.src = src;
div.style.display = "block";
}
function HideImage()
{
document.getElementById('popup').style.display = "none";
}
</script>
hope this helps.
希望这可以帮助。
回答by Nishant Kaushal
To fix the position where the popupimage occurs, you'll need to write a style for #popupImage and place it wherever you want it to appear.
要修复 popupimage 出现的位置，您需要为 #popupImage 编写样式并将其放置在您希望它出现的任何位置。
For the 'onmouseout' not working issue... firstly, your HTML has a missing single quote and a closing the open anchor tag... It should be...
对于“onmouseout”不起作用的问题...首先，您的 HTML 缺少单引号并且关闭了打开的锚标记...它应该是...
<a href="" onmouseover="ShowImage('images/eco.jpg')" onmouseout="HideImage('images/button_ufad4.jpg')"></a>
Notice the missing first single quote.
注意缺少的第一个单引号。
Secondly, in your function, you are not making use of the image "images/button_ufad4.jpg" in any way, so simply adding the additional quote in the begining of the image name should fix the onmouseout problem
其次，在您的函数中，您没有以任何方式使用图像“images/button_ufad4.jpg”，因此只需在图像名称的开头添加附加引号即可解决 onmouseout 问题
