Toggle image src attribute using Javascript
Solution 1
See the changes I made to make it working
<script language="javascript" type="text/javascript">
function chngimg() {
var img = document.getElementById('imgplus').src;
if (img.indexOf('Plus.gif')!=-1) {
document.getElementById('imgplus').src = 'Images/Minus.gif';
}
else {
document.getElementById('imgplus').src = 'Images/Plus.gif';
}
}
</script>
<img id="imgplus" alt="" src="Images/Plus.gif" onmouseover="this.style.cursor='pointer'" onclick="chngimg()" />
Hope that resolves your question.
Solution 2
One way would be to add a toggle variable in your function:
var toggle = false;
function chngimg() {
if (toggle === true) {
document.getElementById('imgplus').src = 'Images/Minus.gif';
} else {
document.getElementById('imgplus').src = 'Images/Plus.gif';
alert(img);
}
toggle = !toggle;
}
Note that it's a better practice to use a sprite for this kind of thing. If you're using two images, the user experience is going to be clunky, because the first time they click the image, there will be a slight delay while the second image loads.
Ideally you would have the two images as a sprite sheet, and be using JQuery. Then you could just do it like this.
HTML
<img id="imgplus" src="Images/Sprite.gif" onclick="chngimg()" />
CSS
#imgplus .clicked { background-position: 0 -30px; }
Javascript
function chngimg() {
$("#imgplus").toggleClass("clicked");
}
Solution 3
I have successfully used this general solution in pure JS for the problem of toggling an img url:
function toggleImg() {
let initialImg = document.getElementById("img-toggle").src;
let srcTest = initialImg.includes('initial/img/url');
let newImg = {
'true':'second/img/url',
'false':'initial/img/url'}[srcTest];
return newImg;
}
Then call toggleImg() inside whatever event handler you use....
someButton.addEventListener("click", function() {
document.getElementById("img-toggle").src = toggleImg();
}
user1583775
Updated on July 16, 2022Comments
-
user1583775 almost 2 years
I am trying to change the HTML image
src
using Javascript. I have two images Plus.gif and Minus.gif.I have inserted HTMLimg
tag and have written a Javascript function to change the imagesrc
when clicked.Problem is that I want to change it back again when user clicks on the image. For example when the page is loaded the
Plus.gif
shows and when user clicks on it the image it changes toMinus.gif
.I want it so, when the image is
Minus.gif
and user clicks on it this should be changed toPlus.gif
.Here is my Javascript function:
<script language="javascript" type="text/javascript"> function chngimg() { var img = document.getElementById('imgplus').src; //= 'Images/Minus.gif'; if (img) { document.getElementById('imgplus').src = 'Images/Minus.gif'; } else if (!img) { document.getElementById('imgplus').src = 'Images/Plus.gif'; alert(img); } } </script>
Image tag:
<img id="imgplus" alt="" src="Images/Plus.gif" onmouseover="this.style.cursor='pointer'" onclick="chngimg()" />
-
Scott over 11 yearsIdeally you should avoid the use of global variable
toggle
so the solution is reusable. -
user1583775 over 11 yearsSo Now Which Funciton I have to use
chngimg()
orcngimg()
?? -
McGarnagle over 11 years@user1583775 same one you're using, that was just a typo.
-
Charleskimani over 2 yearsgreatest solution