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

Question

我有一列按钮，它们必须与第一个按钮做同样的事情，但有自己的个人图片。如何设置 id 以免出现故障？这是我目前所拥有的http://ultimatefinishdetailing.com/Services.html

HTML：（在图片按钮上发布 HTML BEFORE）

<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

来试试这个……

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

<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

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

Nishant 对 mouseout 是正确的，您只是缺少第一个单引号。

你可能想要这样的风格

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

位置：绝对；会告诉浏览器把它放在你想要的地方。在这个例子中，我告诉它距离顶部 50px 和右侧 50px 的位置。您也可以使用关键字“bottom”和“left”。

Answer 3

要修复弹出图像出现的位置，您需要为#popupImage 编写样式并将其放置在您希望它出现的任何位置。

对于“onmouseout”不起作用的问题...首先，您的 HTML 缺少单引号和关闭打开的锚标记...应该是...

<a href="" onmouseover="ShowImage('images/eco.jpg')" onmouseout="HideImage('images/button_ufad4.jpg')"></a>

注意缺少的第一个单引号。

其次，在您的函数中，您没有以任何方式使用图像“images/button_ufad4.jpg”，因此只需在图像名称的开头添加额外的引号即可解决 onmouseout 问题