hi to all I have a noob question, I want to create a custom map of a little island, I wrote custom cause it will be an artistic handwritten map, and on this map I will place some links, locations and markers. in a first moment I used the map and area tags to place the links at specific coordinates, but developing this I think that is impossible to insert html inside the defined area tags, cause everything that I place inside the area tags will end below the map image, so I have to place the marker and locations editing the map image and I really dislike this solution.. so what is the best practice to insert text, markers or html into an image at specific coordinates? in this moment I'm using an absolute position for any element inside the image container and then playing with top and left I can place the html anyware.. but this is very difficoult to adapt for all screen sizes especially for mobile..
I'm reporting a little of code of the last solution
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/
And this is the solution with map tag not working
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: "";
}