I've tried to change a main image when clicking on a thumbnail, but I can't seem to have two different instances of the code together; only one will work at a time. Can someone tell me what I'm doing wrong, please?
My 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");
}
My 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">
Create one changeImage function and pass two parameters, the image and the target div.
function changeImage(img,target) {
document.getElementById(target).src = img.src.replace("_t", "_b");
}
Then call it like onclick='changeImage(this,'img1');'
or onclick='changeImage(this,'img');'
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.