Javascript 鼠标悬停在另一个位置的图像弹出窗口

我有一列按钮，它们必须做与第一个按钮相同的事情，但有自己的图片。如何设置id以避免出现故障？这是我到目前为止所拥有的

HTML：（在图像按钮上发布之前的HTML）

.弹出窗口{
高度：100px；
宽度：100px；
右边距：-100px；
利润上限：-100px；
位置：绝对位置；
右：-50px；
顶部：75px；
}
.按钮{
宽度：300px；
高度：21px；
显示：块；背景图像：url（images/button_fad4.jpg）；
位置：绝对位置；
}

要确定popupimage出现的位置，您需要为#popupimage编写一个样式，并将其放置在希望它出现的任何位置

对于“onmouseout”不起作用的问题。。。首先，您的HTML缺少一个单引号和一个结束OpenAnchor标记。。。应该是

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

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

---

其次，在您的函数中，您没有以任何方式使用图像“images/button_ufad4.jpg”，因此只需在图像名称的开头添加额外的引号就可以解决onmouseout问题，从而解决弹出图像出现的位置问题，您需要为#popupImage编写一个样式，并将其放置在您希望它出现的任何位置

对于“onmouseout”不起作用的问题。。。首先，您的HTML缺少一个单引号和一个结束OpenAnchor标记。。。应该是

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

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

---

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

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

对于这种风格，你可能会想要这样的东西

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

.弹出窗口{
高度：200px；
宽度：100px；
右边距：100px；
利润上限：-10px；
位置：绝对位置；
右：50px；
顶部：50px；
}

---

位置：绝对；将告诉浏览器将其准确放置在您想要的位置。在这个例子中，我告诉它将自身定位在距离顶部50px和距离右侧50px的位置。您也可以使用关键字“bottom”和“left”。

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

对于这种风格，你可能会想要这样的东西

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

.弹出窗口{
高度：200px；
宽度：100px；
右边距：100px；
利润上限：-10px；
位置：绝对位置；
右：50px；
顶部：50px；
}

位置：绝对；将告诉浏览器将其准确放置在您想要的位置。在这个例子中，我告诉它将自身定位在距离顶部50px和距离右侧50px的位置。您也可以使用关键字“底部”和“左侧”。

在这里尝试一下

CSS

.弹出窗口{
高度：200px；
宽度：100px；
右边距：100px；
边缘顶部：10px；
浮动：对；
显示：无；
}
.按钮{
/*更改宽度和高度以匹配button.jpg*/
宽度：50px；
高度：50px；
显示：块；
背景图片：url（image/button.jpg）；
}

HTML

希望这有帮助。

来试试这个

CSS

.弹出窗口{
高度：200px；
宽度：100px；
右边距：100px；
边缘顶部：10px；
浮动：对；
显示：无；
}
.按钮{
/*更改宽度和高度以匹配button.jpg*/
宽度：50px；
高度：50px；
显示：块；
背景图片：url（image/button.jpg）；
}

HTML

---

---

希望这能有所帮助。

我不知道如何编写“样式”，但我正在接受您对Html引号缺失的看法。我明白你在说什么了。我现在就修！您可以参考@Developer Gee reply了解样式。你只需复制他提供的样式“代码”，并将其粘贴/覆盖到你自己的弹出代码上。我添加了一个引号，现在我的弹出窗口消失了！thx…现在转到另一个问题谢谢你的帮助。你是对的。现在我要解决我的最后一个问题。我好像没法把鼠标放在最上面的按钮上…它在所有的按钮上。好主意。谢谢。我想给你代表分数，但我会从另一个帮助我的人那里拿走。小心我不知道如何写一个“风格”，但我相信你的话对Html报价失踪。我明白你在说什么了。我现在就修！您可以参考@Developer Gee reply了解样式。你只需复制他提供的样式“代码”，并将其粘贴/覆盖到你自己的弹出代码上。我添加了一个引号，现在我的弹出窗口消失了！thx…现在转到另一个问题谢谢你的帮助。你是对的。现在我要解决我的最后一个问题。我好像没法把鼠标放在最上面的按钮上…它在所有的按钮上。好主意。谢谢。我想给你代表分数，但我会从另一个帮助我的人那里拿走。小心我在弹出的css代码下添加了按钮代码，但它没有做任何事情…我应该在哪里添加按钮代码，以便鼠标悬停是按钮而不是文本？我正在尝试添加您所说的css按钮代码…不起作用您需要将其添加到a标记我将其添加到syle标记，它除了使所有内容都不起作用之外，没有做任何事情工作……你能给我举个例子吗？这是我最不需要弄清楚的事情！我很接近你说的那样把它添加到a标签上。它去掉了所有其他按钮上的mousover…但它不会将鼠标移到整个按钮上，并且更改参数除了显示文本之外没有任何作用…我应该将其包装在样式标记中吗？我在弹出css代码下添加了按钮代码，但它没有任何作用…我应该在哪里添加按钮代码，以便mousover不是按钮文本？我正在尝试添加您所说的css按钮代码…不工作您需要将其添加到a标记中

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

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

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