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.com/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>