HTML - 当它们相互叠加时，我如何与每个单独的图像进行交互？答案

【问题标题】：HTML - How do I interacting with each individual image when they are overlaid on each other?HTML - 当它们相互叠加时，我如何与每个单独的图像进行交互？
【发布时间】：2022-02-02 17:37:44
【问题描述】：

我在 Photoshop 中构建了一张地图，其中每一层都是地图的一部分。当他们聚在一起时，他们就构成了整个地图。

我想做的是在我的网站上创建一个交互式地图，其中每一块地图都是一个按钮。但是，当我将它们导出为 PNG（具有透明背景）并在 HTML 中覆盖它们时，我只能与最上面的图像进行交互。有没有人对我可以做到这一点的另一种方式提出建议？

这是我的 HTML...

<body style="background: rgba(0,0,0,1.00)">
    
<div class="parent">    
<img class="image1" src="images/Guadrants/Guadrant_1.png">
<img class="image2" src="images/Guadrants/Guadrant_2.png">
<img class="image2" src="images/Guadrants/Quadrant_3.png">
<img class="image2" src="images/Guadrants/Quadrant_4.png">
<img class="image2" src="images/Guadrants/Quadrant_5.png">
<img class="image2" src="images/Guadrants/Quadrant_6.png">
<img class="image2" src="images/Guadrants/Quadrant_7.png">
<img class="image2" src="images/Guadrants/Quadrant_8.png">
<img class="image2" src="images/Guadrants/Quadrant_9.png">
<img class="image2" src="images/Guadrants/Quadrant_10.png">
<img class="image2" src="images/Guadrants/Quadrant_11.png">
<img class="image2" src="images/Guadrants/Quadrant_12.png">
<img class="image2" src="images/Guadrants/Quadrant_13.png">
<img class="image2" src="images/Guadrants/Quadrant_14.png">
<img class="image2" src="images/Guadrants/Quadrant_15.png">
<img class="image2" src="images/Guadrants/Quadrant_16.png">
<img class="image2" src="images/Guadrants/Quadrant_17.png">
<img class="image2" src="images/Guadrants/Quadrant_18.png">
<img class="image2" src="images/Guadrants/Quadrant_19.png">
<img class="image2" src="images/Guadrants/Quadrant_20.png">
<img class="image2" src="images/Guadrants/Quadrant_21.png">
<img class="image2" src="images/Guadrants/Quadrant_22.png">
<img class="image2" src="images/Guadrants/Quadrant_23.png">
<img class="image2" src="images/Guadrants/Quadrant_24.png">
<img class="image2" src="images/Guadrants/Quadrant_25.png">
<img class="image2" src="images/Guadrants/Quadrant_26.png">
<img class="image2" src="images/Guadrants/Quadrant_27.png">
<img class="image2" src="images/Guadrants/Quadrant_28.png">
<img class="image2" src="images/Guadrants/Quadrant_29.png">
<img class="image2" src="images/Guadrants/Quadrant_30.png">
<img class="image2" src="images/Guadrants/Quadrant_31.png">
<img class="image2" src="images/Guadrants/Quadrant_32.png">
<img class="image2" src="images/Guadrants/Quadrant_33.png">
<img class="image2" src="images/Guadrants/Quadrant_34.png">
<img class="image2" src="images/Guadrants/Quadrant_35.png">
<img class="image2" src="images/Guadrants/Quadrant_36.png">
<img class="image2" src="images/Guadrants/Quadrant_37.png">
<img class="image2" src="images/Guadrants/Quadrant_38.png">
<img class="image2" src="images/Guadrants/Quadrant_39.png">
<img class="image2" src="images/Guadrants/Quadrant_40.png">
<img class="image2" src="images/Guadrants/Quadrant_41.png">
<img class="image2" src="images/Guadrants/Quadrant_42.png">
</div>  

</body>

这是我的 CSS...

.parent {
  position: relative;
  top: 0;
  left: 0;
}
.image1 {
  position: relative;
  top: 0;
  left: 0;
  width: 75%;
}
.image2 {
  position: absolute;
  top: 0;
  left: 0;
  width: 75%;
 
}

.image2:hover {
  transform: scale(1.5); 
}
.image1:hover {
  transform: scale(1.5); 
}

【问题讨论】：

标签： html css image photoshop imagemap

【解决方案1】：

对于初学者，我会将图像用作 SVG 文件格式而不是 png 文件格式，SVG:s 为您提供了更多实现目标的可能性。

据我了解，您需要很多不同的图像来形成一个大图像，然后我会更改每个图像在 HTML 中的大小和位置，以便它按照您的需要对齐并且不会相互覆盖，以便形成更大的形象。

【讨论】：

然后你会得到一堆更小的图像片段，你可以玩弄它们来形成你的大图像