Question

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

我有一个按钮（图像），我需要在鼠标悬停时链接到特定位置的弹出图像。如何在另一个html elemnt框中更改弹出窗口的位置？这是我到目前为止所拥有的，但它是用于在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>

当您将鼠标悬停在链接终极完成细节上时，您可以在我的网站上看到图像框（因为我没有指定一个）显示在屏幕的右侧...这就是上面的代码所做的。但我需要按钮才能完成这一切，而且只需要在某个窗口中完成

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

0 个答案: