使用Javascript切换图像src属性

我在尝试使用Javascript更改HTML图像src。我有两个图像Plus.gif和Minus.gif。我插入了HTML img标签，并且已经编写了一个Javascript函数来单击时更改图像src。使用Javascript切换图像src属性

问题是我想在用户单击图像时再次将其更改回来。例如，当页面加载时，Plus.gif显示，当用户点击它时，图像变为Minus.gif。

我想要它，当图像是Minus.gif和用户点击它应该改为Plus.gif。

这里是我的JavaScript函数：

<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>

图片标签：

<img id="imgplus" alt="" src="Images/Plus.gif" onmouseover="this.style.cursor='pointer'" onclick="chngimg()" />

来源

2012-09-01 user1583775

见我马云所做的更改ke 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()" />

希望能够解决您的问题。

来源

2012-09-01 07:42:29 Sandeep

是的这是thing.kooool – user1583775

一种方法是在你的函数添加切换变量：

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; 
}

请注意，对这种事情使用精灵是一种更好的做法。如果您使用的是两张图片，则用户体验将变得笨拙，因为第一次点击图片时，第二张图片加载时会稍微延迟。

理想情况下，您将有两个图像作为精灵表，并使用JQuery。那么你可以这样做。

HTML

<img id="imgplus" src="Images/Sprite.gif" onclick="chngimg()" />

CSS

#imgplus .clicked { background-position: 0 -30px; }

的Javascript

function chngimg() { 
    $("#imgplus").toggleClass("clicked"); 
}

来源

2012-09-01 07:34:51 McGarnagle

理想情况下，您应该避免使用全局变量'toggle'，以便解决方案可以重用。 – Scott

所以现在我必须使用'chngimg（）'或'cngimg（）'？ – user1583775

@ user1583775你正在使用的是同一个，那只是一个错字。 – McGarnagle

我已经成功地使用在纯JS这个通用的解决方案，用于切换一个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; 
}

然后调用toggleImg（）内无论您使用的事件处理程序....

someButton.addEventListener("click", function() { 
    document.getElementById("img-toggle").src = toggleImg(); 
}

来源

2017-08-02 04:12:31 Wtait

使用Javascript切换图像src属性

回答

相关问题