How can I change the image source on click with JavaScript?
Question
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>
3 answers
solution1
2 2017-12-24 07:43:56
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)'; }
solution2
0 2017-12-24 06:34:29
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>
solution3
0 ACCPTED 2017-12-24 09:58:27
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.