javascript - 如何显示图片

Question

我有一些动态显示在网页上的图像。这些图像是可点击的。当我点击其中一张图片时，我想在被点击的图片上显示另一张图片。如果再次点击该图片，则需要删除该图片。

最初，当页面加载时，图像将如下所示显示，当我单击这些图像时，应显示我单击的图像上方的另一张图片。截至目前，我能够在所选图像的一侧显示图像。如图 2 所示

Answer 1

您可以做的只是简单地向您的 tr 添加两个数据属性，这样您就可以拥有 data-image1 和 data-image2，然后只需在鼠标单击发生时更改 img src。

这是我的 jsFiddle:https://jsfiddle.net/wLvn8yzx/

HTML

<img src="http://dreamatico.com/data_images/cat/cat-8.jpg" 
id="imageSwap" 
data-image1="http://dreamatico.com/data_images/cat/cat-8.jpg" 
data-image2="http://dressacat.com/chat.png">

Javascript

document.getElementById("imageSwap").onclick = function (e) {
    if (this.src == this.getAttribute("data-image1")) {
        this.src = this.getAttribute("data-image2");
    } else {
        this.src = this.getAttribute("data-image1");
    }
}

---

或者您可以使用类并设置它们的样式并将背景设置为图像。这是另一个 jsFiddle:https://jsfiddle.net/wLvn8yzx/1/

HTML

<div id="imageSwap" class="image1"></div>

CSS

div{
    height:400px;
    width:400px;
}

.image1{
    background-image: url("http://dreamatico.com/data_images/cat/cat-8.jpg");
}

.image2{
    background-image: url("http://dressacat.com/chat.png");
}

Javascript

document.getElementById("imageSwap").onclick = function (e) {
    if (this.className == "image1") {
        this.className = "image2";
    } else {
       this.className = "image1";
    }
}

---

更新

我创建了一个新的 jsfiddle，它使用 javascript 函数来隐藏和显示交叉图像。

jsFiddle:https://jsfiddle.net/wLvn8yzx/2/

HTML

<img onclick="javascript:imageSwapper()" src="https://upload.wikimedia.org/wikipedia/commons/thumb/2/25/Red.svg/120px-Red.svg.png" class="imageSwap image1">
<img onclick="javascript:imageSwapper()" src="https://upload.wikimedia.org/wikipedia/commons/thumb/archive/f/ff/20150316142725!Solid_blue.svg/120px-Solid_blue.svg.png" class="imageSwap image2">
<img onclick="javascript:imageSwapper()" src="https://s2.graphiq.com/sites/default/files/2307/media/images/t/Green-Yellow_429842_i0.png" class="imageSwap image3">
<img id="crossImage" src="https://upload.wikimedia.org/wikipedia/commons/thumb/7/7d/Red_Cross.svg/120px-Red_Cross.svg.png" class="hidden">

CSS

.hidden{
    display: none;
}

.show{
    display: inline;
}

Java脚本

function imageSwapper() {
    var crossImage = document.getElementById("crossImage");
    if (crossImage.className == "hidden") {
        crossImage.className = "show";
    } else {
        crossImage.className = "hidden"
    }
}