在車輛圖像上創建圖像地圖

Question

我想爲我的網站整合車輛圖像的結構，並點擊我需要創建不同零件的不同零件<a>標籤。什麼是實現這一目標的最佳方式。我聽說圖像映射需要清晰的邊界，但在我的情況下，我認爲定義邊界非常困難。舉一個例子，我們點擊'break pads'，然後我需要瀏覽break pad的備件。什麼是實現這一目標的最佳方式。提前致謝。

Answer 1

這是一個非常大的工作要做，但我仍然有前，後盤墊試了一下。

.image_wrapper { 
 
    display: inline-block; 
 
    position: relative 
 
} 
 
.image_wrapper > a.car_part { 
 
    position: absolute; 
 
} 
 
a.car_part:hover { 
 
    outline: 1px solid red; 
 
} 
 
a.fdisk_break { 
 
    top: 153px; 
 
    width: 56px; 
 
    height: 55px; 
 
    left: 77px; 
 
} 
 
a.bdisk_break { 
 
    top: 153px; 
 
    width: 56px; 
 
    height: 55px; 
 
    right: 86px; 
 
}

<div class="image_wrapper"> 
 
    <img src="https://i.stack.imgur.com/tEUvY.jpg"> 
 
    <a href="https://www.google.com/search?q=front+disk+break" target="_blank" class="car_part fdisk_break" title="Front Disk break, click for search"></a> 
 
    <a href="https://www.google.com/search?q=back+disk+break" target="_blank" class="car_part bdisk_break" title="Back Disk break, click for search"></a> 
 
</div>

嘗試鼠標懸停在前面或後面制動襯塊，你會看到分別與「正面突破盤」或「後退盤破發」彈出。

因爲我使用px這取決於屏幕尺寸可能無法正常工作