Different images show in same page when click on different link using javascript?

Question

please improve this code. If we click on image 2 link . image link 2 no work.i also use more then 2 images in this code.

<script>
        function changeImage() {
            var image = document.getElementById('myImage');
            var img1 = document.getElementById('1');
            var img2 = document.getElementById('2');
            var img3 = document.getElementById('3');

            if (img1.id == 1 ) {
                image.src = "img/1.jpg";
            } 
            else if (img2.id == 2) {
                image.src = "img/2.jpg";
            }
            else if (img3.id == 3) {
                image.src = "img/3.jpg";
            }
             else
            {
                image.src = "img/5.jpg";
            }

        }
    </script>

<!DOCTYPE html>
<html>
<body>

    <h1>JavaScript Can Change Images</h1>

    <img id="myImage" onclick="changeImage()" src="img/0.jpg" width="180" height="180">
    <table>
        <tr>
            <td > <a href="#" id="1" onclick="changeImage()"> Image1</a></td>
            
        </tr>
        <tr>
            <td> <a href="#" id="2"  onclick="changeImage()"> Image2</a></td>
            
        </tr>
  <tr>
            <td> <a href="#" id="3"  onclick="changeImage()"> Image3</a></td>
            
        </tr>
    </table>
   

    
please improve this code. If we click on image 2 link . image link 2 no work.i also use more then 2 images in this code. 
Thanks advance. 

</body>
</html>

Note that the names used for id's need to begin with a letter, see w3.org/TR/html401/types.html#type-name — Marc Audet
– Marc Audet, Commented Jul 1, 2015 at 10:24

VijayS91 · Accepted Answer · 2015-07-01 10:21:30Z

1

Try this Code :

<!DOCTYPE html>
<html>
<body>

    <h1>JavaScript Can Change Images</h1>

    <img id="myImage" onclick="changeImage()" src="img/0.jpg" width="180" height="180">
    <table>
        <tr>
            <td > <a href="#" id="1" onclick="changeImage(this.id)"> Image1</a></td>

        </tr>
        <tr>
            <td> <a href="#" id="2"  onclick="changeImage(this.id)"> Image2</a></td>

        </tr>
  <tr>
            <td> <a href="#" id="3"  onclick="changeImage(this.id)"> Image3</a></td>

        </tr>
    </table>

</body>
<script>
        function changeImage(click_id) {
            var image = document.getElementById('myImage');
            var img1 = document.getElementById('1');
            var img2 = document.getElementById('2');
            var img3 = document.getElementById('3');

            if (click_id == 1 ) {
                image.src = "img/1.jpg";
            } 
            else if (click_id == 2) {
                image.src = "img/2.jpg";
            }
            else if (click_id == 3) {
                image.src = "img/3.jpg";
            }
             else
            {
                image.src = "img/5.jpg";
            }

        }
    </script>
</html>

answered Jul 1, 2015 at 10:21

VijayS91

1,53123 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Muhammad Shahid Over a year ago

i also add another in img tag for other images on same pages. What we do, and please also tell me, how can use multiple function for this purpose. Thanks Advance

Collectives™ on Stack Overflow

Different images show in same page when click on different link using javascript?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related