개별 마우스 오버 버튼에 대해 id를 올바르게 설정하는 방법

Question

첫 번째 버튼과 동일한 작업을 수행해야하지만 개별 사진이있는 버튼 열이 있습니다. ID를 설정하여 글리치가 없도록하려면 어떻게해야합니까? 지금은 세 개의 버튼이 설정되어 있지만 어떻게 든 똑같은 이름을 복사했습니다 (모두 모바일 빠른 세척이라고 말합니다)!

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

자바 스크립트 (전 이미지 버튼에 게시 된 HTML) : 여기에 지금까지 http://ultimatefinishdetailing.com/Services.html

HTML이 무엇

<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가 있어야합니다 (예 : 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 = "popup1", 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> 

자바 스크립트 :

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