我有一些动态显示在网页上的图像。这些图像是可单击的。当我单击其中一张图像时,我想在单击的图像上显示另一张图片。如果再次单击该图片,则需要删除该图片。
最初,当页面加载时,图像将如下所示显示,当我单击这些图像时,应显示我单击的图像上的另一张图片。截至目前,我可以在所选图像的侧面显示图像。如第二张图片所示
最佳答案
您可以做的只是简单地将两个数据属性添加到您的 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");
}
Java脚本
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"
}
}
关于javascript - 如何显示图片,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/32750898/