在车辆图像上创建图像映射

Question

我想为我的网站整合车辆图像结构，并点击我需要创建不同<a>标签的不同备件。实现这一目标的最佳方法是什么？我听说图像映射需要清晰的边界，但在我看来，我认为定义边界非常困难。举个例子，我们点击“打破垫片”＆＃39;然后我需要浏览打破垫的备件。实现这一目标的最佳方法是什么？提前谢谢。

Answer 1

这是一项非常重要的工作，但我仍然尝试使用Front和Back磁盘垫。

.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>

在前面或后面的打破垫上尝试鼠标悬停，你会看到弹出的“Front Disk break”或“Back Disk break”。

  

它可能无效，因为我使用的px取决于屏幕尺寸