Existe-t-il un moyen de masquer l'image après avoir cliqué dessus et de l'afficher en cliquant à nouveau ?

Question

J'ai une image superposée à un objet. Je veux cliquer dessus et le masquer, afficher l'objet (visite virtuelle 360), puis si l'on clique sur la visite virtuelle, afficher exactement la même 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>

Answer 1

Je ne sais pas quel comportement de masquage vous souhaitez, mais si l'espace doit être préservé dans la page, vous pouvez activer l'attribut de visibilité.

Vous pouvez le faire en utilisant des écouteurs d'événements au lieu de JavaScript en ligne. Notez également que l'objet n'a pas d'événement click, nous le mettons donc dans un wrapper et désactivons l'événement click sur l'objet. Voir Comment lier un événement de clic à une balise d'objet ? .

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