CODEWITHSUNDEEP
javascriptimagesrc
CodeMom
CodeMom

Reputation: 5

How can I change the image source on click with JavaScript?

I'm trying to figure out how I can change an image source when clicking on different buttons to show a picture of an animal. My JS code is in-between script tags in the head of my HTML doc. I pasted it below. I am using Safari.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome</title>
    <link rel="stylesheet" href="styles.css">

    <script>
    function change (){
     document.getElementById("pic").src="./images/lion.jpg";
    }
    </script>

  </head>
  <body>

  <header>
   <div class="container">
    <h1>Choose an Animal</h1>
    <hr>
   </div>
  </header>

  <section>
   <div class="container">
    <img src="./images/image.jpg" id="pic">
   </div>
  </section>

  <section id="animals">
   <div class="container">
     <button type="button" class="button1"     onclick="change">Lion</button>
     <button type="button" class="button1">Tiger</button>
     <button type="button" class="button1">Bear</button>
   </div>
  </section>



  </body>
</html>

Upvotes: 0

Views: 3002

Answers (3)

Highdown
Highdown

Reputation: 674

One simply option to get you started is to alter your JavaScript to something like:

function change(index) {
  var imageLookup = ["./images/lion.jpg", "./images/tiger.jpg", "./images/bear.jpg"];
  document.getElementById("pic").src = imageLookup[index];
}

If you put the list of images in an array, you can pass the change function an index from each of your buttons.

As shown, modify the button function for lion to be change(0), for tiger change(1), and for bear change(2). Lions, tigers, and bears, Oh My... You should see some switching if your paths to the images are correct.

Let me know if you are still struggling.

Upvotes: 1

4cody
4cody

Reputation: 354

What I might try to do would be to assign the id to the container div and have your CSS set up so that the background of the div is the image you want, similarly you can then change the CSS background prop with js. 

 <section>
   <div class="container" id="pic">
     <!-- no img tag needed now -->
   </div>
 </section>

From here you can grab the div with js and have your click function perform the same task of changing the image but it will instead be doing this by changing the background-image property of the the div in CSS.

function myFunc () {
  document.getElementById('pic').style.backgroundImage = 
  'url(path/to/image.jpg)';
}

Upvotes: 2

Progesh Subba
Progesh Subba

Reputation: 66

If you are using JQuery you can write code in more efficient way.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Welcome</title>
    <link rel="stylesheet" href="styles.css">
  </head>
  <body>

  <header>
   <div class="container">
    <h1>Choose an Animal</h1>
    <hr>
   </div>
  </header>

  <section>
   <div class="container">
    <img src="images/lion.jpg" id="pic">
   </div>
  </section>

  <section id="animals">
   <div class="container">
     <button type="button" class="button1" data-img="lion.jpg">Lion</button>
     <button type="button" class="button1" data-img="tiger.jpg">Tiger</button>
     <button type="button" class="button1" data-img="bear.jpg">Bear</button>
   </div>
  </section>

   <script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>

  <script type="text/javascript">
    $(function(){
      $('.button1').on('click',function(){
        var image = $(this).data('img');
        $('.container #pic').attr('src','images/'+ image);
      });  
    })
  </script>

Upvotes: 0

Related Questions