单击图像时如何将图像更改为另一图像

Question

我正在制作一个网站，但遇到了问题。 我需要在单击图像时进行更改，然后在再次单击时将其更改回原始图像。 谁能帮我这个？

这是我到目前为止尝试过的代码，但似乎对我不起作用。

<img width="200" height="150" align="right" onclick="changeImg(this, 'Images/Rest2.jpg')" src="Images/Rest2.jpg">

function changeImg(img, Images/Rest1.jpg) {
    img.src = Images/Rest1.jpg;
}

Answer 1

更新

<html>
<body>
    <img src="foo.jpg" id="myImage">
    <script>
        var myImage = document.querySelector('#myImage');

        myImage.addEventListener('click',function(e) {
            var src = (e.target.src || e.srcElement.src);

            if(src == 'foo.jpg') {
                src = 'bar.jpg';
            } else {
                src = 'foo.jpg';
            }
        },false);
    </script>
</body>
</html>

Answer 2

您要的是“切换”功能。 此示例要求您为img id属性。

<img id="image" ...

然后使用以下JS代码：

document.getElementById('image').onclick = function() {
    if (this.src == 'Images/Rest1.jpg') {
        this.src = 'Images/Rest2.jpg';
    } else if (this.src == 'Images/Rest2.jpg') {
        this.src = 'Images/Rest1.jpg';
    } else {
        alert('error');
    }
}

Answer 3

这是一个如何使用Jquery / JS实现的想法：

将您的图片标签放入div
处理该div的onClick事件
onClick：根据当前显示的图像更改图像div的来源。

我希望这有帮助。 您可以发布现有代码，以便找出解决方案。

Answer 4

将当前img源设置为一个变量，第二个源设置为另一个变量。 然后将src属性更改为您的变量，如下所示：

<img src="http://lorempixel.com/200/100/sports/"/>

var source = $('img').attr('src');
var source1 = "http://lorempixel.com/200/100/food/"
$('img').click(function(){
    $(this).attr('src',source1);
    if($(this).attr('src') == source1) $(this).attr('src', source);
});

小提琴

在我的小提琴中，每次都会有不同的图像，因为我以lorempixel图像为例，但是如果放置2张图像，则会得到想要的结果。

Answer 5

速记JavaScript切换

javascript

document.getElementById('img').onclick=function(){
 this.src=(this.src=='img1.jpg'?'img2':'img1')+'.jpg';
}

其中“ img1.jpg”应该是图像的完整链接。 因为即使您仅添加img1.jpg，浏览器也会将其解析为http://example/img1.jpg

函数内部的console.log(this.src) ，您将获得正确的路径。

html

<img id="img" src="img1.jpg">

如果您不打算稍稍更改代码，这是一种现代的方法，但是兼容性较差：

css3

#container{
 width:200px;height:200px;
 background:url('img1.jpg') center center no-repeat;
 background-size:contain;/*or cover or 200px 200px*/
 -webkit-transition:all 700ms ease;/*animation -moz,-ms...*/
}
#container.active{
 background-image:url('img2.jpg');
}

js 1.7

document.getElementById('container').onclick=function(){
 this.classList.toggle('active');
}

html

<div id="container"></div>

铬测试示例。

http://jsfiddle.net/6ZMxK/1/

如果您不赞成，请解释一下原因。

单击图像时如何将图像更改为另一图像

问题描述

5 个解决方案

解决方案1
2 2013-12-12 14:55:01

更新

解决方案2
0 2013-12-12 14:56:18

解决方案3
-1 2013-12-12 14:54:04

解决方案4
-1 2013-12-12 14:58:31

解决方案5
-1 2013-12-12 15:10:30

单击图像时如何将图像更改为另一图像

问题描述

5 个解决方案

解决方案1 2 2013-12-12 14:55:01

更新

解决方案2 0 2013-12-12 14:56:18

解决方案3 -1 2013-12-12 14:54:04

解决方案4 -1 2013-12-12 14:58:31

解决方案5 -1 2013-12-12 15:10:30

解决方案1
2 2013-12-12 14:55:01

解决方案2
0 2013-12-12 14:56:18

解决方案3
-1 2013-12-12 14:54:04

解决方案4
-1 2013-12-12 14:58:31

解决方案5
-1 2013-12-12 15:10:30