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

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

<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实现它的想法：

将ur图片标记放入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);
});

Fiddle

在我的小提琴中，每次都会有一个不同的图像，因为我以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>

在chrome中测试的示例。

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

Aaaand如果你贬低请解释原因。

如何在单击图像时将图像更改为其他图像

5 个答案:

的更新