Question

我有一列按钮，必须与第一个按钮做同样的事情，但有自己的个人照片。如何设置ID以便没有故障？这是我到目前为止http://ultimatefinishdetailing.com/Services.html

HTML :(在图片按钮上张贴HTML）

<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

Nishant对于鼠标输出是正确的，你只是错过了第一个单引号。

对于你可能想要这样的风格

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

这里试试这个......

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 3

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

对于'onmouseout'没有工作问题...首先，你的HTML有一个缺少的单引号和关闭打开的锚标签...它应该是......

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

注意缺少第一个单引号。

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

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

3 个答案: