Javascript multiple image change with button clicks
Question
Ok, this is what I'm trying to do, it was too vague earlier so here's a better explanation, keep in mind I've only been programming pages for like 2 weeks now so any help is appreciated.
I need to create a HTML/JavaScript webpage that displays three images along with a caption (description) for each image. For each image I need to also create a button that changes the first image to a different image on the same subject (and change the caption too). Also need to have a button that restores all three images back to the original images.
I got the coding to work so that one image would change to another on button click but then when I added my 2nd and 3rd coding nothing would work anymore.
<html>
<head>
<script>
function changeImage()
{
var img = document.getElementById("image");
img.src="http://cdn.memegenerator.net/images/300x/159304.jpg";
return false;
}
</script>
</head>
<body>
<img id="image" src="http://thechive.files.wordpress.com/2011/10/william-defoe.jpg" />
<br><br><br>
<button id="clickme" onclick="changeImage();">Click to change image!</button>
<script>
function changeImage()
{
var img = document.getElementById("image1");
img.src="http://playerperspective.com/wp-content/uploads/2011/05/mike-tyson-3.jpg";
return false;
}
</script>
<body>
<img id="image1" src="http://static.guim.co.uk/sys- images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg" />
<button id="Click1" onclick="changeImage();">Click to change!</button>
</body>
<br>
<script>
function changeImage()
{
var img = document.getElementById("image2");
img.src="http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg";
return false;
}
</script>
<body>
<img id="image2" src="http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master- chief-1.jpg" />
<button id="Click2" onclick="changeImage();">Click to change!</button>
</body>
<br>
</html>
2 answers
solution1
1 2013-04-19 08:22:32
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script>
var dd = 5;
var cnt = 0;
function chng() {
var rotator = document.getElementById('rr'); // change to match image ID
var imageDir = 'Images/'; // change to match images folder
var images = ['2.jpg', '3.jpg', '4.jpg', '5.jpg'];
cnt++;
var len = images.length;
if (cnt < dd) {
rr.src = imageDir + images[cnt];
}
else if (cnt == len) {
rr.src = imageDir + images[0];
cnt = 0;
}
}
</script>
</head>
<body>
<img src="Images/1.jpg" id="rr" height="500" width="650">
<input type="button" value=" next. . " onclick="chng()" />
</body>
</html>
solution2
0 ACCPTED 2012-11-04 15:14:11
There are several issues in your page: Missing document type declaration, missing title tag, actual content HTML in head and multiple body tags. In addition to these, changeImage() is replaced in every script with a new one. Finally there will be only the last function, which changes the src for #image2 .
If I've understood your question correctly, you need something like this:
The script in the head :
function changeImage (element) {
var n,
imageData = [
[
{
src: "http://thechive.files.wordpress.com/2011/10/william-defoe.jpg",
caption: "Caption for image 1.1"
},
{
src: "http://cdn.memegenerator.net/images/300x/159304.jpg",
caption: "Caption for image 1.2"
}
],
[
{
src: "http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg",
caption: "Caption for image 2.1"
},
{
src: "http://playerperspective.com/wp-content/uploads/2011/05/mike-tyson-3.jpg",
caption: "Caption for image 2.2"
}
],
[
{
src: "http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg",
caption: "Caption for image 3.1"
},
{
src: "http://static.guim.co.uk/sys-images/Technology/Pix/pictures/2012/3/5/1330958259135/Halo-4-007.jpg",
caption: "Caption for image 3.2"
}
]
];
if (element > -1) {
document.getElementById('image' + element).src = imageData[element][1].src;
document.getElementById('caption' + element).innerHTML = imageData[element][1].caption;
} else {
for (n = 0; n < imageData.length; n++) {
document.getElementById('image' + n).src = imageData[n][0].src;
document.getElementById('caption' + n).innerHTML = imageData[n][0].caption;
}
}
return;
}
And the body :
<body>
<button onclick="changeImage(-1);" >Click to restore all!</button>
<div>
<h1 id="caption0">Caption for image 1.1</h1>
<button onclick="changeImage(0);">Click to change!</button>
<img id="image0" src="http://thechive.files.wordpress.com/2011/10/william-defoe.jpg" />
<div>
<h1 id="caption1">Caption for image 2.1</h1>
<button onclick="changeImage(1);">Click to change!</button>
<img id="image1" src="http://static.guim.co.uk/sys-images/Sport/Pix/pictures/2008/10/31/1225454147507/Mike-Tyson-001.jpg" />
</div>
<div>
<h1 id="caption2">Caption for image 3.1</h1>
<button onclick="changeImage(2);">Click to change!</button>
<img id="image2" src="http://cdn.slashgear.com/wp-content/uploads/2012/04/halo-master-chief-1.jpg" />
</div>
</body>
As you can see, the data for paths and captions is in the objects in nested array. This way they are separated from actual content, and the code is easier to maintain.
You didn't provide an example of the layout for the captions of the images, so I put caption information in H1 tags above the image. Feel free to change the element and its position. Notice, that you can also use HTML-tags within caption texts.
However, there are some limitations and waste of CPU-time when executing this code: imageData is created by every click and only two different paths can be used per element.
I'd suggest you to have more object-oriented approach to the task. Please take a look at this JSfiddle , which demonstrates quite similar functionality, and is more flexible and maybe easier to maintain.
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.