0

当我单击要更改 (img) 的缩略图时，它也会更改 (img1) 的主图像。我只想更改 AGM 缩略图 (img)，并更改 BLACSBF (img1) 将不胜感激任何帮助。（：

我的 Javascript

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

非常感谢你！

4

2 回答 2

0

您需要将目标图像元素作为参数传递给changeImage函数

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

然后

<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">
于 2013-06-28T03:52:50.373 回答
0

如果您直接在 JavaScript 中附加事件处理程序，您可能能够进一步简化您的标记。这不是跨浏览器方法，但它确实有效。首先，您可以精简标记并将较大的img元素转换为类，而不用担心一堆唯一的 ID：

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

然后，在您的 JavaScript 中，您可以循环浏览所有img没有class属性的标签，并添加您的事件处理程序addEventListener()（这部分不适用于 IE8，但可以通过跨浏览器实现轻松修复） .

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

于 2013-06-28T04:27:27.630 回答