malikaiman Ответов: 1

Как показать всплывающее окно на карте изображения при нажатии кнопки hotspot aeras? Начальная загрузка

Как показать всплывающее окно на карте изображения при нажатии кнопки hotspot aeras? Я хочу показать соответствующую деталь во всплывающем окне, связанную с любым конкретным местоположением, в котором есть горячая точка? Обратите внимание, что я использую не google map, а простое png-изображение в качестве карты.?

Что я уже пробовал:

Я пытался перейти с одной страницы на другую с помощью href, но теперь я не хочу переходить на другие страницы и хочу показать ту же информацию во всплывающем окне?

1 Ответов

Рейтинг:
1

Karthik_Mahalingam

обратитесь к этому HTML-тег карты[^]
Учебник по HTML - изображения карты [^]
событие onClick[^]

<script>
          function clickmap(info) {
              alert(info)

          }
      </script>

      <img src="https://www.w3schools.com/tags/planets.gif" width="145" height="126" alt="Planets" usemap="#planetmap">

      <map name="planetmap">
          <area shape="rect" coords="0,0,82,126" href="#" onclick="clickmap('someinfo 1')" alt="Sun">
          <area shape="circle" coords="90,58,3" href="#" onclick="clickmap('someinfo 2')" alt="Mercury">
          <area shape="circle" coords="124,58,8" href="#" onclick="clickmap('someinfo 3')" alt="Venus" >
      </map>