Javascript 如何正确设置单个鼠标悬停按钮的id

我有一列按钮，它们必须做与第一个按钮相同的事情，但有自己的图片。如何设置id以避免出现故障？现在我已经设置了三个按钮，但它们不知何故复制了相同的名称（它们都说移动快速清洗）！这是我到目前为止所拥有的

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

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

算出了！为每个按钮使用不同的id、类。下面的示例是一个按钮，每隔一个按钮更改id/类的数量

HTML:1。CSS（样式）必须有自己的id，例如：（.弹出1,2,3等；.按钮1,2,3等） 2.

<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="" /> 
</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>

<STYLE MEDIA="screen" TYPE="text/css">
.pop-up1 {height: 100px;width: 100px;margin-right:-100px;margin-top:-100px;position:absolute;display:none;right:-50px;top: 75px;opacity:.7;z-index: 1}
.button1 {
      width:300px;
      height:21px;
      display:block; background-image:url(images/button_ufad4.gif);
      position:absolute;
}
.button1:hover {    background-position:left 43px;
}
</STYLE>
<A ID="BUTTON1" HREF="" CLASS="button1" ONMOUSEOVER="javascript:ShowImage('images/ufad2servicesexteriorandinteriordetailing.gif')" ONMOUSEOUT="javascript:HideImage()"></A>
<DIV ID="popup1" CLASS="pop-up1">
<IMG ID="popupImage1"> 
</DIV>

<script type="text/javascript">
    function ShowImage(src)
    {
        var img= document.getElementById('popupImage1');
        var div= document.getElementById('popup1');
        img.src=src;
        div.style.display="block";
    }
    function HideImage()
    { document.getElementById('popup1').style.display ="none";}
</script>