javascript - mouseover image popup image at another location - Stack Overflow

admin管理员组

文章数量:1335380

I have a column of buttons that have to do the same thing as the first button but with there own individual pics. How do I set the id so that there's no glitches? Here is what I have so far .html

HTML: (posted HTML BEFORE on the image button)

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

I have a column of buttons that have to do the same thing as the first button but with there own individual pics. How do I set the id so that there's no glitches? Here is what I have so far http://ultimatefinishdetailing./Services.html

HTML: (posted HTML BEFORE on the image button)

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

• javascript
• html
• popup
• mouseover
• onmouseover

Share Improve this question Follow edited May 16, 2013 at 16:42 Jason Sutphin asked May 15, 2013 at 18:50 Jason SutphinJason Sutphin 2911 gold badge22 silver badges99 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 2

Nishant is correct for the mouseout, you are just missing the first single quote.

For the style you would probably want something like this

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

The position: absolute; will tell the browser to put it exactly where you want it. In this example I told it to position itself 50px from the top and 50px from the right. You can also use the keywords "bottom" and "left".

Here try this...

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>

hope this helps.

To fix the position where the popupimage occurs, you'll need to write a style for #popupImage and place it wherever you want it to appear.

For the 'onmouseout' not working issue... firstly, your HTML has a missing single quote and a closing the open anchor tag... It should be...

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

Notice the missing first single quote.

Secondly, in your function, you are not making use of the image "images/button_ufad4.jpg" in any way, so simply adding the additional quote in the begining of the image name should fix the onmouseout problem

本文标签： javascriptmouseover image popup image at another locationStack Overflow