title: mouseover image popup image at another location
body: <p>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 <a href="http://ultimatefinishdetailing.com/Services.html" rel="nofollow">http://ultimatefinishdetailing.com/Services.html</a></p>
  
  <p>HTML: (posted HTML BEFORE on the image button)</p>
  
  <pre><code>&lt;STYLE MEDIA="screen" TYPE="text/css"&gt;
  .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;
  }
  &lt;/style&gt;
  &lt;a href="" class="button" onmouseover="javascript:ShowImage('images/InteriorandExteriorDetailing.jpg')" onmouseout="javascript:HideImage()"&gt;&lt;/a&gt;
  
  &lt;div id="popup" class="pop-up"&gt;
     &lt;img id="popupImage" alt="Popup image" /&gt; 
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code> &lt;script type="text/javascript"&gt;
      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";
      }
  &lt;/script&gt;
  </code></pre>