如何为各个鼠标悬停按钮正确设置ID

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

弄清楚了！ 为每个按钮使用不同的ID，类。 下面的示例是一个按钮，每隔一个按钮更改ID /类的数量

HTML：1. CSS（样式）必须具有自己的ID EX :(。pop-up1,2,3等； .button1,2,3等）2. <A> （锚标记）必须具有自己的ID和类EX：（ID = BUTTON1,2,3等； CLASS = button1,2,3等）3. div标签<div>必须具有其自己的ID，类，图像id EX：（DIV ID =“ popup1”，CLASS =“ pop-up1”，IMG ID =“ popupImage1

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

Javascript：

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