创建艺术地图并将html放置在特定坐标处

Question

大家好，我有一个菜鸟问题，我想创建一个小岛的自定义地图，我写了自定义地图，原因是它将是一幅艺术性的手写地图，在此地图上我将放置一些链接，位置和标记。最初，我使用地图和区域标签将链接放置在特定的坐标处，但是要开发此功能，我认为将html插入定义的区域标签内是不可能的，因为我放置在区域标签内的所有内容都将在地图下方结束图像，因此我必须放置标记和编辑地图图像的位置，而我真的不喜欢这种解决方案。那么，将文本，标记或html插入图像中特定坐标的最佳实践是什么？在这一刻，我为图像容器内的任何元素使用了绝对位置，然后在顶部和左侧播放，可以放置html anyware ..但这很难适应所有屏幕尺寸，尤其是移动屏幕。 >

我正在报告最后一个解决方案的一些代码

HTML

<div id=container>
<div id="gallery">
<img src="http://neos.anekitalia.com/wp-content/uploads/media/mappa- 
lefkada.png" alt="Lefkada" width="320" height="500" border="0" 
usemap="#Map">
</div>
<div id="location-html"><span>Genion</span></div>
</div>

CSS

#location-html {
position: absolute;
top: 260px;
left: 250px;
color: #000;
cursor: pointer;
z-index: 9999;
font-size: 12px;
font-weight: 700;
font-family: "Open Sans",sans-serif;
}
#location-html span:before {
height:10px;
width:10px;
display:inline-block;
background-color:#b01817;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
content: "";
}

https://jsfiddle.net/w35ua82v/

这是地图标记不起作用的解决方案

HTML

<div id="gallery">
<img src="http://neos.anekitalia.com/wp-content/uploads/media/mappa- 
lefkada.png" alt="Lefkada" width="320" height="500" border="0" 
usemap="#Map">
<map name="Map" id="Map">
<area shape="rect" coords="330,219,406,234" href="#" alt="Genion">
<div id="location-html"><span>Genion</span>
</area>
</map>
</div>
</div>

CSS

#location-html {
position: absolute;
top: 260px;
left: 250px;
color: #000;
cursor: pointer;
z-index: 9999;
font-size: 12px;
font-weight: 700;
font-family: "Open Sans",sans-serif;
}
#location-html span:before {
height:10px;
width:10px;
display:inline-block;
background-color:#b01817;
border-radius: 50%;
display: inline-block;
margin-right: 4px;
content: "";
}

https://jsfiddle.net/bu4fsoeL/