Создать карту изображения на автомобиле image

Question

Я хочу интегрировать структуру изображения автомобиля, как показано ниже для моего сайта, и при нажатии на разные запасные части мне нужно создать разные теги <a>. Каков наилучший способ достичь этого. Я слышал, что карта изображений нуждается в четких границах, но в моем случае я считаю, что определение границ очень сложно. Скажем, например, мы нажимаем «перемычки», тогда мне нужно просмотреть запасные части проломов. Каков наилучший способ достичь этого. Заранее спасибо.

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>

Try мыши над на передней или задней перерыв площадки вы увидите всплывающее окно с "Front Disk перерыв" или "Назад" разрыв диска соответственно.

Он не может работать, потому что я использую px, которая зависит от размера экрана