单击缩略图可更改较大的图像

时间:2013-06-28 02:54:56

标签: javascript

我在点击缩略图时尝试更改主图像,但我似乎无法将两个不同的代码实例放在一起;只有一个会一次工作。有人可以告诉我,我做错了吗?

我的Javascript -

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

function changeImage(img) {
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">

1 个答案:

答案 0 :(得分:1)

创建一个changeImage函数并传递两个参数,即图像和目标div。

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

然后将其称为onclick='changeImage(this,'img1');'onclick='changeImage(this,'img');'