Changing the source of an image with a JavaScript function in HTML

Question

I'm currently working on a project where I'm writing a webpage that gives basic diagrams about human anatomy. What I'm currently testing is the ability to switch dynamically between different images at the press of a button using a Javascript function, so that the user will eventually be able to switch between different views of the human body.

This is the code that I have so far.

<!DOCTYPE html>
<html lang="en">
    <head>
        <script>
            function skin()
            {
                document.getElementById("image").src="humanoutline.jpg";
            }

            function muscle()
            {
                document.getElementById("image").src="humanoutline2.jpg";
            }

            function organs()
            {
                document.getElementById("image").src="humanoutline3.jpg";
            }

            function skeleton()
            {
                document.getElementById("image").src="humanoutline4.jpg";
            }
        </script>
    </head>
    <body>
         <style>

             .button
             {
                 background-color: green;
                 border-radius: 4px;
                 color: white;
                 padding: 15px 32px;
                 text-align: center;
                 text-decoration: none;
                 display: inline-block;
                 font-size: 16px;
             }
               #image
             {
                 position:absolute;
                 width:500px;
                 height:700px;
                 z-index: 0;
                 top: 30%;
                 left: 45%;
                 padding:50px;
                 margin: -100px 0 0 -200px;
                 text-align:center;
                 align-content:center;
                 outline-style:solid;
                 outline-width:1px;
                 outline-color:black;
             }
             #rightside
             {
                 text-align:center;
                 width:400px;
                 height:1000px;
                 padding: 30px;
                 line-height: 100px;
                 float:right;
                 outline-style:solid;
                 outline-width:1px;
                 outline-color:black;
             }

        </style>
        <div id="rightside">
            <p>Select Layer</p>
            <form>
                <button class="button" onclick="skin()">Skin</button><br>
                <button class="button" onclick="muscle()">Muscle</button><br>
                <button class="button" onclick="organs()">Organs</button><br>
                <button class="button" onclick="skeleton()">Skeleton</button><br>
            </form> 
        </div>
        <div>
            <img id="image" src="humanoutline.jpg" alt="Body" style="width:464px;height:700px; ">
        </div>
    </body>
</html>

While this should work in theory, the problem is that whenever each of the buttons is pressed, the page only partially loads the new image and then switches back to the default image, which is humanoutline.jpg.

For reference, here are the four images that I'm currently using.

humanoutline.jpg:

humanoutline2.jpg:

humanoutline3.jpg:

humanoutline4.jpg:

random_user_name · Accepted Answer · 2016-03-08 19:28:00Z

3

The issue is that the button is "submitting" the form, which causes the page to reload.

The simple solution is to modify your functions as follows:

function skin() {
    document.getElementById("image").src="humanoutline.jpg";
    // the "return false" will cause the button to NOT submit the form
    return false;
}

however your code as written so far is going to get large quickly, and be difficult to maintain, so I'd like to suggest / offer an alternative method of doing this.

You can change your buttons to call the same function, but pass in the parameter that is relevant. Additionally, they should return, see below:

        <form>
            <button class="button" onclick="return changeImage('humanoutline.jpg')">Skin</button><br>
            <button class="button" onclick="return changeImage('humanoutline2.jpg')">Muscle</button><br>
            <button class="button" onclick="return changeImage('humanoutline3.jpg')">Organs</button><br>
            <button class="button" onclick="return changeImage('humanoutline4.jpg')">Skeleton</button><br>
        </form>

And also change your script to accept a parameter, and use that in the image:

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

edited Mar 8, 2016 at 19:28

answered Mar 8, 2016 at 17:02

random_user_name

26.3k7 gold badges81 silver badges119 bronze badges

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

2 Comments

user2309750 Over a year ago

I've made your changes and the image still resets to the default after pressing the button. Are you sure that "return false" will prevent the page from reloading?

random_user_name Over a year ago

Thanks for the comment. I edited the code - the buttons need to have onclick="return changeImage('...');" in order to properly stop the page reloading. My apologies!

rubergly · Accepted Answer · 2016-03-08 18:13:44Z

1

You just need to add type="button" to the <button> tags, like this:

<form>
  <button type="button" class="button" onclick="skin()">Skin</button><br>
  <button type="button" class="button" onclick="muscle()">Muscle</button><br>
  <button type="button" class="button" onclick="organs()">Organs</button><br>
  <button type="button" class="button" onclick="skeleton()">Skeleton</button><br>
</form>

And here's a codepen with the change that's working (though the image URLs are hotlinked from the uploads in this SO question, so I'm not sure if they'll keep working): http://codepen.io/anon/pen/GZZJVv

answered Mar 8, 2016 at 18:13

rubergly

8988 silver badges20 bronze badges

Collectives™ on Stack Overflow

Changing the source of an image with a JavaScript function in HTML

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related