Changing the source of an image with JavaScript in HTML

advertisements

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:


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