如何使用 HTML、CSS 和 JS 用網格（可點擊的方塊）覆蓋圖像？

Question

我有一個這樣的平面圖：

我需要用網格（可點擊的方塊）覆蓋特定區域，就像這樣：

所以，如您所見，我不需要用網格覆蓋所有圖片。 只有幾節。

另外，我希望正方形可以點擊，因為我希望能夠使用一些 JS 來更改正方形的顏色。

關於此的許多主題，但所有主題都用網格覆蓋了整個圖像。 我需要覆蓋某些領域。

可以用 HTML、CSS 和 JS 來實現嗎？

到目前為止，這是我的代碼：

 .test { margin-top: 0; margin-left: 0; } h3 { margin: 40px 0 0; } ul { list-style-type: none; padding: 0; } li { display: inline-block; margin: 0 10px; } a { color: #42b983; } img { position: absolute; width: 55%; height: 925px; top: 105px; left: 25px; }.img1 { z-index: 1; }.img2 { z-index: 3; }

 <div class="container"> <div class="row"> <button class="switch btn btn-info col-md-2 col-sm-2 col-lg-2" @click="addFurniture">{{ text }}</button> </div> <div class="row"> <div style="posiotion: relative;"> <div class="img" id="floorplan"> <div class="img1 imgSize"> <img id="grid" src="../assets/floorplan.png" class="col-md-7 grid rounded mx-auto d-block" alt="floorplan"> <div class="col-md-2"> <button class="test btn btn-success" style="position: absolute;">test</button> </div> </div> <div class="img2"> <img v-if=".isHidden" src="../assets/furniture.png" alt="furniture" class="col-md-7 rounded mx-auto d-block"> </div>

Answer 1

你不能用JS改變圖片的顏色，你可以只在上面添加一些styles，看起來更像是一個過濾器。

對於網格，您可以使用absolute定位在圖片頂部放置您想要的形狀的元素。 然后你做任何你想做的事。

只要您不將圖像轉換為代碼，我認為您的選擇是有限的。