javascript - 鼠标悬停图像在另一个位置弹出图像

Question

我有一列按钮，它们必须执行与第一个按钮相同的操作，但有自己的单独图片。如何设置 id 才能避免出现故障？这是我到目前为止所拥有的http://ultimatefinishdetailing.com/Services.html

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:

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

Answer 1

Nishant 对于鼠标移出是正确的，您只是缺少第一个单引号。

对于样式，您可能会想要这样的东西

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

position:absolute；会告诉浏览器将其准确地放在您想要的位置。在这个例子中，我告诉它把自己定位在距离顶部 50 像素和距离右侧 50 像素的位置。您还可以使用关键字“bottom”和“left”。