CODEWITHSUNDEEP
javascripthtmlimage
user2309750
user2309750

Reputation: 1577

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

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: enter image description here

humanoutline2.jpg: enter image description here

humanoutline3.jpg: enter image description here

humanoutline4.jpg: enter image description here

Upvotes: 1

Views: 93

Answers (2)

random_user_name
random_user_name

Reputation: 26180

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;
 }

Upvotes: 3

rubergly
rubergly

Reputation: 898

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

Upvotes: 1

Related Questions