썸네일을 클릭하면 의도하지 않은 메인 이미지가 변경됩니다.

Question

변경하려는 썸네일 (img)을 클릭하면 (img1)의 기본 이미지도 변경됩니다. AGM 축소판 (img) 만 변경하고 BLACSBF 만 변경 (img1) 도움을 주시면 감사하겠습니다. (:

내 자바 스크립트

function changeImage(img) { 
document.getElementById("img").src = img.src.replace("_t", "_b"); 
document.getElementById("img1").src = img.src.replace("_t", "_b"); 

내 HTML

<img src="images/AGM/events_t.jpg" 
onclick='changeImage(this);' 
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"   
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5"> 

<img src="images/AGM/events1_t.jpg" 
onclick='changeImage(this);' 
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"  
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5"> 

<img id="img" src="images/AGM/events_b.jpg" width="650"> 



<img src="images/BLACSBF/events_t.jpg" 
onclick='changeImage(this);' 
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"  
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5"> 

<img src="images/BLACSBF/events1_t.jpg" 
onclick='changeImage(this);' 
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"  
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5"> 

<img id="img1" src="images/BLACSBF/events_b.jpg" width="650"> 

매우 감사

Answer 1

당신은 changeImage 함수에 매개 변수로 대상 이미지 요소를 전달해야

!

function changeImage(img, target) { 
    document.getElementById(target).src = img.src.replace("_t", "_b"); 
} 

then

<img src="images/AGM/events_t.jpg" 
onclick="changeImage(this, 'img');" 
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"   
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5"> 

<img src="images/AGM/events1_t.jpg" 
onclick="changeImage(this, 'img');" 
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"  
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5"> 

<img id="img" src="images/AGM/events_b.jpg" width="650"> 



<img src="images/BLACSBF/events_t.jpg" 
onclick="changeImage(this, 'img1');" 
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"  
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5"> 

<img src="images/BLACSBF/events1_t.jpg" 
onclick="changeImage(this, 'img1');" 
onmouseout="this.style.opacity=1;this.filters.alpha.opacity=100"  
onmouseover="this.style.opacity=0.5;this.filters.alpha.opacity=0.5"> 

<img id="img1" src="images/BLACSBF/events_b.jpg" width="650"> 

Answer 2

JavaScript로 이벤트 핸들러를 직접 연결 한 경우 마크 업을 좀 더 단순화 할 수 있습니다. 이것은 크로스 브라우저 방식은 아니지만 확실히 작동합니다. 첫째 대신 걱정 고유 ID의 무리를 필요없이 클래스로 더 큰 img 요소를 마크 업 슬림 다운 및 회전 수 : 그럴 수주기의 모든 img 태그를 통해 자바 스크립트에서,

<img src="images/AGM/events_t.jpg"> 
<img src="images/AGM/events1_t.jpg"> 
<img class="img" src="images/AGM/events_b.jpg" width="650"> 
<img src="images/BLACSBF/events_t.jpg"> 
<img src="images/BLACSBF/events1_t.jpg"> 
<img class="img" src="images/BLACSBF/events_b.jpg" width="650"> 

그런 다음 class 특성이없고 addEventListener() (이 항목은 IE8에서 작동하지 않지만 cross browser implementation으로 쉽게 수정할 수있는 부분) 이벤트 처리기를 추가하십시오.

var imgs = document.getElementsByTagName('img'); 
for (var i = 0; i < imgs.length; i++) { 
    if (!imgs[i].getAttribute('class')) { 
     //mouseout handler 
     imgs[i].addEventListener("mouseout", function() { 
      this.style.opacity = 1; 
      this.filters.alpha.opacity = 100; 
     }); 

     //mouseover handler 
     imgs[i].addEventListener("mouseover", function() { 
      this.style.opacity = 0.5; 
      this.filters.alpha.opacity = 0.5; 
     }); 

     //click handler 
     imgs[i].addEventListener("click", function() { 
      var src = this.src.replace("_t", "_b"); 
      var fullImg = siblingByClass(this); 
      fullImg.src = src; 

      //traverse siblings till 'img' class is found 
      function siblingByClass(node) { 
       var sibling = node.nextSibling; 
       if (sibling.nodeType === 3 || sibling.getAttribute('class') !== 'img') { 
        return siblingByClass(sibling); 
       } else { 
        return sibling; 
       } 
      } 

     }); 
    } 
} 

jsFiddle