Adakah terdapat cara untuk menyembunyikan imej selepas mengkliknya dan memaparkannya apabila mengklik sekali lagi?

Question

Saya mempunyai imej yang menindih objek. Saya ingin mengklik dan menyembunyikannya, menunjukkan objek (360 lawatan maya), dan kemudian jika lawatan maya diklik, tunjukkan imej yang sama.

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

Answer 1

Saya tidak pasti tingkah laku bersembunyi yang anda mahukan, tetapi jika ruang harus dikekalkan dalam halaman, anda boleh menogol atribut keterlihatan.

Anda boleh melakukan ini menggunakan pendengar acara dan bukannya JavaScript sebaris. Juga ambil perhatian bahawa objek tidak mempunyai acara klik, jadi kami meletakkannya pada pembalut dan melumpuhkan acara klik pada objek. Lihat Bagaimana untuk mengikat acara klik pada teg objek? .

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