[hideprofile][html]<style>
.map {
position: relative;
width: 800px;
height: 523px;
margin: 20px auto;
background: url("https://upforme.ru/uploads/001c/73/c0/2/964972.png") center/cover no-repeat;
border-radius: 12px;
overflow: hidden;
}
.hotspot {
position: absolute;
width: 20px;
height: 20px;
display: inline-block;
border-radius: 50%;
backdrop-filter: blur(1px);
border: 2px solid rgba(255,255,255,.85);
box-shadow: 0 2px 8px rgba(0,0,0,.25);
transform: translate(-50%, -50%);
cursor: pointer;
text-decoration: none;
outline: none;
}
.hotspot:hover,
.hotspot:focus-visible {
background: rgba(0,0,0,.55);
}
.hotspot::after {
content: attr(data-tip);
position: absolute;
left: 50%;
bottom: calc(100% + 8px);
transform: translateX(-50%);
padding: 6px 9px;
white-space: nowrap;
font: 13px/1.2 system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
color: #fff;
background: rgba(0,0,0,.85);
border-radius: 6px;
opacity: 0;
pointer-events: none;
transition: opacity .15s ease;
}
.hotspot:hover::after,
.hotspot:focus-visible::after {
opacity: 1;
}
.hotspot::before {
content: "";
position: absolute;
left: 50%;
bottom: 100%;
transform: translate(-50%, 3px) rotate(45deg);
width: 8px;
height: 8px;
background: rgba(0,0,0,.85);
opacity: 0;
transition: opacity .15s ease;
}
.hotspot:hover::before,
.hotspot:focus-visible::before {
opacity: 1;
}
.hotspot i {
position: absolute; inset: 0;
border-radius: 50%;
box-shadow: 0 0 0 0 rgba(255,255,255,.45);
animation: pulse 3s infinite;
}
@keyframes pulse {
to { box-shadow: 0 0 0 16px rgba(255,255,255,0); }
}
@media (max-width: 760px) {
.map { width: 92vw; height: 54vw; }
}
.dreamyard { top: 64.4%; left: 92.3%;}
.wellspringcave { top: 61.1%; left: 82.4%; }
.pinwheelforest { top: 72.7%; left: 73.9%; }
.libertygarden { top: 87%; left: 27.7%; }
.desertresort { top: 59.5%; left: 46%; }
.reliccastle { top: 59.5%; left: 41.7%; }
.battlesubway { top: 51.2%; left: 50.4%; }
.lostlornforest { top: 44.6%; left: 57.1%; }
.driftveilcity{ top: 51.2%; left: 25.1%; }
.mistraltoncave{ top: 42.3%; left: 24.6%; }
.chargestonecave { top: 48.2%; left: 13.5%; }
.celestialtower{ top: 29.9%; left: 12%; }
.twistmountain { top: 31%; left: 24.6%; }
.dragonspiraltower { top: 17.4%; left: 23.5%; }
.mooroficirrus { top: 18%; left: 31.9%; }
.icirrusсity{ top: 23.9%; left: 25.1%; }
.humilaucity{ top: 19.8%; left: 92.5%; }
.lentimastown{ top: 37.5%; left: 71.3%; }
.blackcity { top: 51.3%; left: 74.1%; }
.mistraltoncity{ top: 37.4%; left: 12.9%; }
.floccesytown{ top: 71.8%; left: 12%; }
.aspertiacity{ top: 91.6%; left: 3.5%; }
.virbankcity{ top: 71.8%; left: 23.8%; }
.lacunosatown{ top: 23.9%; left: 74.1%; }
.undellatown { top: 37.5%; left: 86.3%; }
.opelucidcity{ top: 23.9%; left: 50.4%; }
.nuvematown{ top: 91.4%; left: 89.1%; }
.accumulatown { top: 79.6%; left: 89.1%; }
.anvilletown { top: 18.1%; left: 3%; }
</style>
<div class="map" role="img" aria-label="Юнова">
<a class="hotspot dreamyard" href="" data-tip="Сад Сновидений" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot wellspringcave" href="" data-tip="Грот Живой Воды" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot pinwheelforest" href="" data-tip="Ветряной Лес" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot libertygarden" href="" data-tip="Сад Свободы" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot desertresort " href="" data-tip="Пустынный Приют" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot reliccastle" href="" data-tip="Реликтовый замок" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot battlesubway" href="" data-tip="Боевое метро" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot lostlornforest" href="" data-tip="Лес Блужданий" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot driftveilcity" href="" data-tip="Дрифтвейл" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot mistraltoncave" href="" data-tip="Пещера Ветрогула" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot chargestonecave" href="" data-tip="Пещера Зарядье" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot celestialtower" href="" data-tip="Лазурная Башня" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot twistmountain " href="" data-tip="Гора Вихор" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot dragonspiraltower" href="" data-tip="Башня Драконов" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot mooroficirrus" href="" data-tip="Топи Крусталикса" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot icirrusсity" href="" data-tip="Крусталикс" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot humilaucity" href="" data-tip="Гумалау" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot lentimastown" href="" data-tip="Лентимас" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot virbankcity" href="" data-tip="Вирбанк" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot blackcity" href="" data-tip="Блэк-Сити" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot mistraltoncity" href="" data-tip="Мистральтон" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot floccesytown" href="" data-tip="Флоккеси" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot aspertiacity" href="" data-tip="Аспертия" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot lacunosatown" href="" data-tip="Лакуноса-Хиллс" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot undellatown" href="" data-tip="Анделла" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot opelucidcity" href="" data-tip="Опельюсид" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot nuvematown" href="" data-tip="Ньювем" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot accumulatown" href="" data-tip="Акьюмула" target="_blank" rel="noopener"><i></i></a>
<a class="hotspot anvilletown" href="" data-tip="Энвил" target="_blank" rel="noopener"><i></i></a>
</div>[/html]
