Javascript HTML在单击时显示图像

我有一个HTML页面，其中有一个图像（想用作按钮）和一些我设置为不可见的CSS图像：隐藏。我想在单击此“图像”时单击.png“”以显示另一个多个图像

因此，标记到其他一些图像。在我的例子中，我希望单击“w-click.png”调用JavaScript来显示图像

我发现一个点击一个图像出现，但我想点击几个图像出现

编辑：这是我的代码

<img src="IMAGE/w-click.png" style="z-index:200; margin-left:6680px; position:relative; width:700px; margin-top:-100px; padding:0; position:absolute; " />

    <div class="invisible-livingroom">
        <img src="IMAGE/w-clock.png" style="position:absolute; margin-left:1200px; filter:brightness(1.3);visibility:hidden; " />
        <img src="IMAGE/w-stand.png" style="position:absolute; margin-left:1830px; margin-top:120px;filter:brightness(1.2);  height:800px; z-index:5; visibility:hidden;"/>
        <img src="IMAGE/w-cushion.png" style="position:absolute; margin-left:1450px; margin-top:270px; transform:rotate(2deg); visibility:hidden;"/>
        <img src="IMAGE/w-light.png" style="position:absolute; margin-left:1310px; width:900px; margin-top:-130px; filter:brightness(0.95); visibility:hidden;" />
        <img src="IMAGE/w-livingroom-table.png" style="position:absolute; margin-left:1310px; width:900px; margin-top:240px; filter:brightness(1.6); visibility:hidden;"/>
        <img src="IMAGE/w-frame2.png" style="position:absolute; width:300px; margin-left:1500px; margin-top:120px; visibility:hidden;"/>
    </div> 

---

将类添加到所有图像，如“hid_img”

---

将类添加到所有图像，如“hid_img”

---

我建议您为触发元素提供一个

id

，从

内联css

分离/移动到

css文件

，使用javascript有很多方法。 请复习一下这个

//声明变量
var trigger=document.getElementById（“触发器”）；
trigger.addEventListener（'click'，函数（e）{
var c=document.getElementsByClassName（“不可见的livingroom”）[0]//仅尝试获取第一个数组。元素可以具有相同的类名
c、 style.display='block'；
})

/*设置默认值无*/
1.隐形客厅{
显示：无；
}
/*仅为方便起见*/
img{
高度：50px；
宽度：50px；
背景颜色：蓝色；
}

---

我建议您为触发元素提供一个

id

，从

内联css

分离/移动到

css文件

，使用javascript有很多方法。 请复习一下这个

//声明变量
var trigger=document.getElementById（“触发器”）；
trigger.addEventListener（'click'，函数（e）{
var c=document.getElementsByClassName（“不可见的livingroom”）[0]//仅尝试获取第一个数组。元素可以具有相同的类名
c、 style.display='block'；
})

/*设置默认值无*/
1.隐形客厅{
显示：无；
}
/*仅为方便起见*/
img{
高度：50px；
宽度：50px；
背景颜色：蓝色；
}

请添加一些代码您在使用jQuery吗？@aaalsubaie-hmmm我想使用java脚本。。我从未使用过jQuery…你也需要添加你的javascript…@100rabh问题是！！！我不知道应该添加什么…请添加一些代码您使用jQuery吗？@aaalsubaie-hmmm我想使用java脚本。。我从未使用过jQuery…你也需要添加你的javascript…@100rabh问题是！！！我不知道我应该补充什么…只是神奇地工作了！我必须使用数组，对吗D顺便说一句，谢谢！真是不可思议！我必须使用数组，对吗D顺便说一句，谢谢！

function showImage() {
    var img = document.getElementById('myImageId');
    img.style.visibility = 'visible';
}    

var imagesRoot = document.getElementsByClassName("invisible-livingroom");
var images = imagesRoot[0].getElementsByTagName("img");
for (var i = 0; i < images.length; i++) {
    images[i].style.visibility = "visible";
}

$(".invisible-livingroom img").css("visibility", "hidden")

<div class="invisible-livingroom">
    <img class="hid_img" src="IMAGE/w-clock.png" style="position:absolute; margin-left:1200px; filter:brightness(1.3);visibility:hidden; " />
    <img class="hid_img" src="IMAGE/w-stand.png" style="position:absolute; margin-left:1830px; margin-top:120px;filter:brightness(1.2);  height:800px; z-index:5; visibility:hidden;"/>
</div> 

var x = document.getElementsByClassName("hid_img");
var i;
for (i = 0; i < x.length; i++) {
    x[i].style.visibility = "visible";
}

<div id="lr" class="invisible-livingroom" style="visibility:hidden;"></div>

document.getElementsById("invisible-livingroom").style.visibility = 'visible';