在图像上放置可点击的小框-html

Question

我有这样的印象

我想在上面放一些小的点击框，像这样

有人知道如何使用HTML/CSS/JS实现这一功能，并使颜色在点击时动态（这将是我的功能）吗？

Answer 1

您可以将所有图像添加到容器div中，然后使用css:

HTML

<div class="container">
  <img class="image_1" /> // the background
  <img class="image_2" /> // the clickable square
</div>

CSS

.container {
      position: relative;
    }

.image_2 {
      position: absolute;
      left: 50px;
      top: 50px;
    }

Answer 2

您必须使用SVG。 使用svg以外的任何东西来使图像的某些部分可点击是不明智的。

[https://www.w3schools.com/graphics/svg_intro.asp]