Swap images with a list of HTML links with JavaScript
Question
I am trying to swap images using JavaScript. I have a main content area the loads one image. I have a sidebar with a list of links and I want to use JavaScript to change the image with each link. here is my code so far:
<html>
<head>
<title>Rat Dog Inc. ~ Services</title>
<script type="text/javascript">
var myImg;
var myImage= [];
myImage[0] = "../images/rd_surf_large.jpg";
myImage[1] = "../images/laundry.png";
myImage[2] = "../images/tug-o-war.png";
myImage[3] = "../images/cuddlepuppy.png";
myImage[4] = "../images/rd-howling.mp4";
function displayImg(){
document.getElementById('myImage[]');
}
</script>
</head>
<body>
<div id="main">
<img src="../images/rd_surf_large.png" alt="Rat Dog Inc." id="myImg"/>
</div>
<div id="sidebar">
<h2>Rat Dog Inc. Most Popular Services</h2>
<ul>
<li><a href="#" onClick="displayImg(myImage[0]);">Surfing Lessons</a> <span style="font-size: 12px">(img)</span></li>
<li><a href="#" onClick="displayImg(myImage[1]);">Laundry Folding</a> <span style="font-size: 12px">(img)</span></li>
<li><a href="#" onClick="displayImg(myImage[2]);">Tug-O-War Arm Workouts</a> <span style="font-size: 12px">(img)</span></li>
<li><a href="#" onClick="displayImg(myImage[3]);">Cuddling</a> <span style="font-size: 12px">(img)</span></li>
<li><a href="#" onClick="displayImg(myImage[4]);">Howling Lessons</a> <span style="font-size: 12px">(video)</span></li>
</ul>
</div>
4 answers
solution1
0 2015-04-12 23:14:31
please try and use this method of getElementById
For example:
<img id="image" src="image1.jpg">
<button onclick="changeToImage2('image')">Image 2</button>
<script>
function changeToImage(id) {
var myImage = document.getElementById(id);
myImage.src = "image2.jpg";
}
// then create other buttons and other functions to change the image.
</script>
solution2
0 ACCPTED 2015-04-12 23:28:01
Ok. So here's the deal. When you put your image on your page , like this:
<img src="image1.jpg" id="myImage">
And we assign the I'd 'myImage' to it....if we want to change the image via a link (I prefare a button), we use javascript in a way to manipulate it. You simply use this method known as :
document.getElementById()
Which finds an element in our page by its I'd. So if we put this button on our page:
<button onclick="changeImage()">Change The Image</button>
And put this script (which has the changeImage() function) :
<script>
function changeImage(){
var myImage = document.getElementById("myImage");
//then we change the src of the image
myImage.src="image2.jpg"
}
</script>
Our image will change of we click the button.
For reference , please visit http://www.htmldog.com/guides/javascript/intermediate/thedom
Thank you
solution3
0 2015-04-12 23:29:21
You can use document.getElementById("image").src="image.png"; to change the src tag of an element.
Although for what you are doing, I reccomend you take a look at jQuery
solution4
0 2015-04-12 23:32:24
Your javascript is incorrect. I'm not quite sure you understand how it works.
First of all, your function doesn't accept any parameters, and yet you're providing it with one. It will just ignore this because it doesn't know what to do with it.
Next, your document.getElementById in your displayImg() has the wrong input. Right now it's literally looking for an element with the ID " myImage[] "... of which there are none.
Also, you have a variable you never use ( myImg ). You should probably get rid of it.
Again, I'm getting the sense that you don't really know javascript that well or don't get the theory behind it. If you need help, w3schools has some great tutorials.
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.