0

最初のボタンと同じことをしなければならないボタンの列がありますが、独自の個々の写真があります。エラーが発生しないように ID を設定するにはどうすればよいですか? 現在、3 つのボタンを設定していますが、どういうわけか同じ名前がコピーされています (すべてモバイル クイック ウォッシュと表示されています)。これが私がこれまでに持っているものです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>
4

1 に答える 1

0

理解した！ボタンごとに異なる ID、クラスを使用します。以下の例は 1 つのボタンのもので、他のボタンごとに ID/クラスの番号を変更します

HTML: 1. CSS (スタイル) には独自の ID が必要です EX:(.pop-up1,2,3,etc.; .button1,2,3,etc.) 2. <A>(アンカー タグ) にはID が必要です独自の ID とクラス EX:(ID=BUTTON1,2,3,etc; CLASS=button1,2,3,etc.) 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>
于 2013-05-17T17:06:45.640 に答える