I have an image overlaying an object. I want to click and hide it, show the object (360 virtual tour), and then if the virtual tour is clicked, show the exact same image.
<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>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
I'm not sure what hiding behavior you want, but if space should be preserved in the page, you can toggle the visibility attribute.
You can do this using event listeners instead of inline JavaScript. Also note that the object does not have a click event, so we put it on a wrapper and disable the click event on the object. See How to bind a click event to an object tag? .
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; }