如何实现点击切换覆盖图与360虚拟漫游的显示状态？

直接上修改后的完整代码，可实现你需要的点击隐藏/显示交互效果：

<!-- 覆盖层图片 -->
<img 
  id="overlayImg"
  src="https://i.ibb.co/ZBkxZHW/360-overlay-white.png" 
  onclick="hideOverlay()" 
  style="position:absolute;opacity:1;left:0;top:0;width:100%;height:400px;z-index:100;" 
/>

<!-- 360漫游内容容器 -->
<object 
  id="vrContainer"
  scrolling="no" 
  data="https://via.placeholder.com/400" 
  width="100%" 
  height="400" 
  type="text/html"
  onclick="showOverlay()"
>
</object>

<script>
// 隐藏覆盖层图片
function hideOverlay() {
  document.getElementById('overlayImg').style.display = 'none';
}

// 显示覆盖层图片
function showOverlay() {
  document.getElementById('overlayImg').style.display = 'block';
}
</script>

关键改动说明： #

• 给图片和object分别添加id标识，方便JavaScript精准定位元素
• 将图片的内联点击逻辑抽成独立函数hideOverlay()，代码结构更清晰
• 给object绑定onclick事件，调用showOverlay()实现点击区域显示图片的功能
• 修正原代码里opacity:;的无效语法，改为opacity:1;（如果不需要半透明效果，可直接删除该属性）
• 简化了部分冗余样式属性（比如left:0%改为left:0，视觉效果完全一致）

这样就能实现：点击图片时图片隐藏，露出下方的360漫游内容；点击360漫游区域时，图片重新覆盖显示。

内容的提问来源于stack exchange，提问作者José Rotiélio E Silva Junior