Question

我正在尝试搜索有关如何创建交互式楼层地图（我想我可以将蓝图用作背景图像）的信息，该交互式楼层地图在某些特定区域（在会议室中）具有交互按钮，这些按钮会根据他们的可用性。房间的可用性将通过HTTP POST检查到我将创建的服务，但是我的主要问题是我找不到有关如何在图像上创建这些按钮的任何信息。我希望这些按钮显示一个小的文本框，其中包含有关会议室，会议信息等的一些信息。有人可以向我推荐任何文档，指南，教程或其他内容吗？也许有一些我可以使用的js库。

非常感谢您的帮助！

Answer 1

希望这会有所帮助。

<div>
  <img src="https://static.planetminecraft.com/files/resource_media/screenshot/1326/qmblock_5813523_lrg.jpg" alt="room layout">
  <button onclick="changeBackground(this)">Click me</button>
</div>
<script>
  let changeBackground = (ele) => {
    let bg = ele.style.background;
    ele.style.background = bg === 'red' ? 'transparent' : 'red';
  }
</script>
<style>
  div {
    position: relative;
    max-width: 240px;
    margin: auto;
  }
  
  img {
    width: 100%;
  }
  
  button {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none
  }
</style>

楼层地图上的交互式按钮

1 个答案: