Привет всем У меня есть вопрос noob, я хочу создать собственную карту маленького острова, я написал собственную, потому что это будет художественная рукописная карта, и на этой карте я буду размещать некоторые ссылки, местоположения и маркеры. В первый момент я использовал теги карты и области, чтобы разместить ссылки в определенных координатах, но, разрабатывая это, я думаю, что невозможно вставить html в определенные теги области, потому что все, что я помещаю в теги области, закончится ниже карты изображение, поэтому я должен разместить маркер и местоположения, редактирующие изображение карты, и мне очень не нравится это решение ... так что лучше всего вставлять текст, маркеры или HTML в изображение в определенных координатах? в данный момент я использую абсолютную позицию для любого элемента в контейнере изображения, а затем играю с верхним и левым краями, я могу разместить html-программу ... но это очень сложно адаптировать для всех размеров экрана, особенно для мобильных устройств.
Я сообщаю немного кода последнего решения
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/