1

按钮图像鼠标悬停在另一个位置的弹出图像（html框）

我有一个按钮（图像），我需要在鼠标悬停时将其链接为特定位置的弹出图像。如何更改弹出窗口出现在另一个 html 元素框中的位置？这是我到目前为止所拥有的，但它是用于在 html 中嵌入 css 的链接，以便移动它......所以不知道这是否会有所帮助。我决定使用按钮，因为它看起来更好。这是我正在尝试编辑的网站，您将鼠标悬停在左侧的特定按钮图像上，您将获得与屏幕右侧按钮有关的弹出图像http://ultimatefinishdetailing.com/Services。 html

HTML：

<style media="screen" type="text/css">
 .pop-up {
  height : 50px;
  width : 50px;
  top : 10px;
  left : 0px;
  right : 800px;
  float : right;
}

</style>

<a href="" onmouseover="ShowImage('enter filename')" onmouseout="HideImage()">Ultimate Finish Auto Detailing</a>

<div class="pop-up">

   <img id="popupImage" src="" alt="Popup image" style="display: none"/> 
</div>

Javascript：

<script type="text/javascript">
    function ShowImage(src)
    {
        var img = document.getElementById('popupImage');
        img.src = src;
        img.style.display = "block";
    }
    function HideImage()
    {
        document.getElementById('popupImage').style.display = "none";
    }
</script>

当您将鼠标悬停在 Ultimate Finish Detailing 链接上时，您可以在我的网站上看到图像框（因为我没有指定一个）显示在屏幕的右侧......这就是上面的代码所做的。但我需要按钮来执行此操作，并且所有操作都在某个窗口中

4

0 回答 0