javascript - 链接或按钮鼠标悬停弹出框/图像位置更改

Question

我有一个文本框（链接），当前链接为鼠标悬停弹出图像，但弹出窗口出现在鼠标悬停位置。我需要将其更改为特定位置。如何更改弹出窗口出现的位置？这是我到目前为止所拥有的：

HTML：

<a href="" onmouseover="ShowImage('http://ultimatefinishdetailing.com/images/vancombination4.jpg')" onmouseout="HideImage()">Ultimate Finish Auto Detailing</a>

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

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>

Answer 1

将图像包装在 div 中

<div class="pop-up">

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

根据您的需要将css应用于div

 .pop-up {
  height : 100px;
  width : 100px;
  top : 30px;
  left : 25px;
  float : right;
}

Fiddle