如何点击图片的不同部分并定向到不同的目的地？

Question

我有一张png图片，它是一张地图，代表4个国家：法国，​​意大利，西班牙和德国，我需要做的是，使用CSS进行划分，并通过在每个区域上传递光标，我和＃39;将有一个名称为每个国家的弹出窗口。

Div并不需要与每个国家的确切形状保持一致。

请知道如何为此图片中的每个区域添加div？

现在我试试这个：

container{
   width : 100px;
   height : 100px;
   overflow : hidden;
}

，HTML是：

<div class = "container"><img src="src/assets/img_map.png"/></div>

Answer 1

在图片上创建热点/图片

图像映射是一种图形图像，用户可以在其中单击图像的不同部分并定向到不同的目的地。通过根据x和y坐标（相对于左上角）定义每个热区域来制作图像映射。使用每组坐标，您可以指定用户在区域内单击时将指向的链接。

Image map generator link

Answer 2

使用imagemap（html Elements map和area）并通过JavaScript进行必要的突出显示。

或者在容器上执行position: relative并在容器中添加带position: absolute的div。