Javascript multiple image change with button clicks - Stack Overflow-软件玩家

admin管理员组
文章数量:1323731

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=".jpg";
return false;
}

</script>

</head>
<body>
<img id="image" src=".jpg" />
<br><br><br>
<button id="clickme" onclick="changeImage();">Click to change image!</button>

<script> 

function changeImage()
{
var img = document.getElementById("image1");
img.src=".jpg";
return false;
}

</script>

<body>
<img id="image1" src="    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=".jpg";
return false;
}

</script>

<body>
<img id="image2" src=" chief-1.jpg" />
<button id="Click2" onclick="changeImage();">Click to change!</button>
</body>

<br>

</html>

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 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/images/300x/159304.jpg";
return false;
}

</script>

</head>
<body>
<img id="image" src="http://thechive.files.wordpress./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./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./wp-content/uploads/2012/04/halo-master- chief-1.jpg" />
<button id="Click2" onclick="changeImage();">Click to change!</button>
</body>

<br>

</html>

Share Improve this question edited Nov 4, 2012 at 5:20 asked Nov 4, 2012 at 4:46 Circus 131 gold badge1 silver badge5 bronze badges

Hi Chad and wele 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 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, wele again to SO! – 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 Commented Nov 4, 2012 at 4:53
<html> <head> <script> function changeImage() { var img = document.getElementById("image"); img.src="cdn.memegenerator/images/300x/159304.jpg"; return false; } </script> </head> <body> <img id="image" src="thechive.files.wordpress./2011/10/william-defoe.jpg" /> <br><br><br> <button id="clickme" onclick="changeImage();">Click to change image!</button> </body> </html> – Circus Commented Nov 4, 2012 at 4:53
1 @ChadThompson - put the code in your original question by editing it – 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 Commented Nov 4, 2012 at 5:00

| Show 4 more ments

2 Answers 2

Sorted by: Reset to default 1

<!DOCTYPE html>
<html xmlns="http://www.w3/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>

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./2011/10/william-defoe.jpg",
                    caption: "Caption for image 1.1"
                },
                {
                    src: "http://cdn.memegenerator/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./wp-content/uploads/2011/05/mike-tyson-3.jpg",
                    caption: "Caption for image 2.2"
                }
            ],
            [
                {
                    src: "http://cdn.slashgear./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./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./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.

本文标签： Javascript multiple image change with button clicksStack Overflow

版权声明：本文标题：Javascript multiple image change with button clicks - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://www.betaflare.com/web/1742121165a2421706.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

编程频道|软件玩家 - 软件改变生活！

Javascript multiple image change with button clicks - Stack Overflow

2 Answers 2

更多相关文章