亚洲国产日韩欧美一区二区三区,精品亚洲国产成人av在线,国产99视频精品免视看7,99国产精品久久久久久久成人热,欧美日韩亚洲国产综合乱

Community

Learn

Tools Library

AI Tools

Leisure

English

Is there a way to hide the image after clicking it and display it when clicking again?

P粉186017651 2024-04-03 20:13:41

615

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>

P粉186017651

reply all(1)

P粉5059175902024-04-04 12:54:13 1 floor

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;
}

Like +0

Add Reply