Change image with a press on the button
Question
I want to change my image to a gif with the use of a button, this part of the code i have working.
But now they asked me to change the gif back to the previous image with a second button (let's call it a stop button).
Here is the code i have to this point:
<script>
function pictureChange()
{
document.getElementById("theImage").src="http://www.animaties.com/data/media/194/vis-bewegende-animatie-0135.gif";
}
</script>
<body>
<img id="theImage" src="http://www.pastasite.nl/file/2011/11/vis.jpg">
<p><input type="button" id="theButton" value="click me!" onclick="pictureChange()"></p>
</body>
The images are only for example.
2 answers
solution1
0 ACCPTED 2016-05-23 08:39:18
Just else condition
function pictureChange() { if (document.getElementById("theImage").src == "http://www.pastasite.nl/file/2011/11/vis.jpg") { document.getElementById("theImage").src = "http://www.animaties.com/data/media/194/vis-bewegende-animatie-0135.gif"; } else { document.getElementById("theImage").src = "http://www.pastasite.nl/file/2011/11/vis.jpg"; } }
<img id="theImage" src="http://www.pastasite.nl/file/2011/11/vis.jpg"> <p> <input type="button" id="theButton" value="click me!" onclick="pictureChange()"> </p>
solution2
0 2016-05-23 08:47:08
Save original src in a data attribute before changing src
function pictureChange() { var elem = document.getElementById("theImage"); if (!elem.getAttribute("data-origsrc")) { elem.setAttribute("data-origsrc", elem.getAttribute('src')); } elem.src = "http://www.animaties.com/data/media/194/vis-bewegende-animatie-0135.gif"; } function revert() { var elem = document.getElementById("theImage"); elem.src = elem.getAttribute("data-origsrc"); }
<img id="theImage" src="http://www.pastasite.nl/file/2011/11/vis.jpg"> <p> <input type="button" id="theButton" value="click me!" onclick="pictureChange()"> <input type="button" value="stop" onclick="revert()"> </p>
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.
Related Question
How can i make the image change 3 times with only 1 button press?
How can I change the present image of the button to another image on button press in react-native
Change Focus after button press
change bg color of button on press
How to change a video on the press of a button
Images Change on Button Press Broken
flexslider content change on button press
How do I use JavaScript to change an image in my <section> by the press of a button?
button color change by tab key press
How to change color of button on press in React Native?
Related Tags