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

How to properly set id for individual mouseover buttons

本文关键字：按钮 id 悬停 鼠标 何正确 设置 单个      更新时间：2023-09-26

我有一列按钮，必须做同样的事情作为第一个按钮，但有自己的个人图片。如何设置id以避免出现故障?现在我设置了三个按钮，但他们不知何故复制了相同的名称(他们都说移动快速清洗)!这是目前为止的内容http://ultimatefinishdetailing.com/Services.html

HTML:(在图像按钮上张贴HTML BEFORE)

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

明白了!对每个按钮使用不同的id和类。下面的例子是一个按钮，改变id/类的数量为每一个其他按钮

HTML: 1。CSS(样式)必须有它自己的id EX:(.pop-up1,2,3，等等;.button1、2、3等)2. <A>(锚标记)必须有自己的id和类EX:(id = button1,2,3等;类= button1, 2、3、等)3.div标签<div>必须有它自己的id, class，图像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>
相关文章：