Ich habe ein Bild, das ein Objekt überlagert. Ich möchte darauf klicken und es ausblenden, das Objekt anzeigen (virtueller 360-Grad-Rundgang) und dann, wenn auf den virtuellen Rundgang geklickt wird, genau dasselbe Bild anzeigen.
<img src="https://i.ibb.co/ZBkxZHW/360-overlay-white.png" onclick="this.style.display='none';" style="position:absolute;opacity:;left:0%;top:0%;width:100%;height:400px;margin-left:0px;margin-top:0px;z-index:100;" /> <object scrolling="no" data="https://via.placeholder.com/400" width="100%" height="400" type="text/html"> </object>
我不确定您想要什么隐藏行为，但如果页面中应保留空间，您可以切换可见性属性。
您可以使用事件侦听器而不是内联 JavaScript 来完成此操作。另请注意，对象没有单击事件，因此我们将其放在包装器上并禁用对象上的单击事件。请参阅如何将点击事件绑定到对象标记？。
document.querySelector('.img-thumb').addEventListener('click', event => { event.currentTarget.style.visibility = 'hidden'; document.querySelector('.obj-wrapper').style.visibility = 'visible'; }); document.querySelector('.obj-wrapper').addEventListener('click', event => { event.currentTarget.style.visibility = 'hidden'; document.querySelector('.img-thumb').style.visibility = 'visible'; });.img-thumb { position: absolute; opacity: ; left: 0%; top: 0%; width: 100%; height: 400px; margin-left: 0px; margin-top: 0px; z-index: 100; } .obj-wrapper { visibility: hidden; } .obj-wrapper object { pointer-events: none; }