当我点击一个图像时，如何将其更改为另一个图像

How can I make an image change to another image when I click on it

本文关键字：图像 另一个 一个      更新时间：2023-09-26

我正在制作一个网站，遇到了一个问题。当我点击它时，我需要更改图像，当我再次点击时，将其更改回原始图像。有人能帮我吗？

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

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

更新 

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

您想要的是一个"toggle"函数。此示例要求为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');
    }
}

以下是如何使用Jquery/JS:实现它的想法

  1. 将您的图像标签放入div 中

  2. 处理该div 的onClick事件

  3. onClick：根据当前显示的图像更改图像div的来源

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

快捷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)和u得到了正确的路径。

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/

如果你投了反对票，请解释原因。

将当前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个图像，你会得到你想要的结果。

相关文章：