Weave: http://kodeweave.sourceforge.net/editor/#b49e1b998a030e3dc8084c2771498a38
You can do this a few ways either using an if else statement or a ternary operator.
var changeIMG = document.querySelector(".changeIMG")
var oldSrc="http://i.telegraph.co.uk/multimedia/archive/02223/bear-cub-toy_2223075k.jpg"
var newSrc="http://image.mlive.com/home/mlive-media/width960/img/grandrapidspress/photo/2015/03/20/-6328b3da95a15820.JPG"
function changeSrc() {
var imgElement = document.querySelector(".bears")
var src = imgElement.src
imgElement.src = src === oldSrc ? newSrc : oldSrc
}
changeIMG.onclick = function() {
changeSrc()
}
changeSrc()
body {
padding: 1em;
text-align: center;
}
.changeIMG {
display: block;
}
.bears {
display: block;
width: 52%;
margin: 1.1em auto 0 auto;
}
<link rel="stylesheet" href="http://getbootstrap.com/dist/css/bootstrap.css"/>
<script src="http://code.jquery.com/jquery.min.js"></script>
<script src="http://getbootstrap.com/dist/js/bootstrap.js"></script>
<button type="button" class="btn changeIMG btn-primary">
Change Source
</button>
<img class="bears">
1
solved Is it possible to change only the picture? [closed]