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>

Hi Chad and welcome to Stackoverflow. You mentioned in this post that you were "too vague" in your earlier question. This one is a little bit better, but I would suggest that you also post your code, or head over to jsfiddle.net and provide an example in your question to the problem that you are having. This will strengthen your answer so we can better help you and you can get an answer to your question! Hope this helps you a bit, and, welcome again to SO! — JasCav
– JasCav, Commented Nov 4, 2012 at 4:49
This is the coding I used for the first image switch, then I tried to replicate it while changing the img id and it made the rest of the code stop working: — Circus
– Circus, Commented Nov 4, 2012 at 4:53
<html> <head> <script> function changeImage() { var img = document.getElementById("image"); img.src="cdn.memegenerator.net/images/300x/159304.jpg"; return false; } </script> </head> <body> <img id="image" src="thechive.files.wordpress.com/2011/10/william-defoe.jpg" /> <br><br><br> <button id="clickme" onclick="changeImage();">Click to change image!</button> </body> </html> — Circus
– Circus, Commented Nov 4, 2012 at 4:53
@ChadThompson - put the code in your original question by editing it — PitaJ
– PitaJ, Commented Nov 4, 2012 at 4:56
Ok, that's the code I used on the first image and it worked fine, then when I tried to just replicate it and change the variable names for image2 and image3 the entire code stopped working. — Circus
– Circus, Commented Nov 4, 2012 at 5:00

Mohit Pokhriyal · Accepted Answer · 2013-04-19 08:22:32Z

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

Teemu · Accepted Answer · 2012-11-04 17:22:30Z

0

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.

edited Nov 4, 2012 at 17:22

answered Nov 4, 2012 at 15:14

Teemu

23.5k7 gold badges61 silver badges113 bronze badges

5 Comments

Circus Over a year ago

Thanks very much for the lookover and help with the coding, I appreciate it.

Circus Over a year ago

Worked like a charm, I didn't realize I could code all 3 scripts into one and thought I had to separate them each due to the layout (very new to this as I said), thanks a lot.

Teemu Over a year ago

Thanks, I think maybe my JSfiddle was too heavy =). Have you visited at developer.mozilla.org/en-US , there you can find basics and also advanced information over JS, CSS, HTML and many more.

Teemu Over a year ago

Would you mind, if I asked you to accept the answer. That way I earn some rep, and others in SO can see that your problem is solved.

Circus Over a year ago

My bad, haven't checked back here in a week but I accepted it.

Collectives™ on Stack Overflow

Javascript multiple image change with button clicks

2 Answers 2

Comments

5 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

5 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related