使用onclick（）更改图片 [英] Change an image with onclick()

问题描述

当我点击对象时，我想将图片更改为其他图片。代码按以下顺序堆叠：

I want to change an image to some other image when i click on the object. the code is stacked in the following order:

<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>
<li><img><some text></img></li>

我想做的是，当我点击

到图像的彩色版本，即，一些其他图像。现在，我知道我可以使用jquery / JS来完成它。但我不想要大量的JS代码来完成这么简单。

What i wish to do is, when i click on the

i want to change the image to a colored version of the image, ie, some other image. Now, I know i can use jquery/JS to accomplish it. But i dont want a huge amount of JS code to accomplish something so simple.

可以使用更简单的方法吗？像伪选择器？ .active类??

Can it be done using something simpler? Like pseudo selectors? .active class??

我似乎无法想象。

推荐答案

要使用javascript更改图片onclik，您需要具有以下ID的图片：

To change image onclik with javascript you need to have image with id:

<p>
        <img alt="" src="http://www.userinterfaceicons.com/80x80/minimize.png" 
            style="height: 85px; width: 198px" id="imgClickAndChange" onclick="changeImage()"  />
</p>

然后，您可以在点击图片时调用javascript函数：

Then you could call javascript function when image is clicked:

<script language="javascript">
    function changeImage() {

        if (document.getElementById("imgClickAndChange").src == "http://www.userinterfaceicons.com/80x80/minimize.png") 
        {
            document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/maximize.png";
        }
        else 
        {
            document.getElementById("imgClickAndChange").src = "http://www.userinterfaceicons.com/80x80/minimize.png";
        }
    }
</script>

如果当前的img.src设置为minimize.png，反之亦然。
有关详情，请访问：
使用javascript更改图片链接

This code will set image to maximize.png if current img.src is set to minimize.png and vice versa. For more details visit: Change image onclick with javascript link

这篇关于使用onclick（）更改图片的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！