单击热点aeras时如何在图像地图上显示弹出窗口？引导 [英] How to show popup on image map when hotspot aeras are clicked? Bootstrap

问题描述

点击热点区域时，如何在图像地图上显示弹出窗口？我想在弹出窗口中显示与热点有关的任何特定位置的相关细节？注意我没有使用谷歌地图，而是使用简单的png图像作为地图。？



我尝试过：



我试图使用href从一个页面导航到其他页面，但现在我不想;想要导航到其他页面并希望在弹出窗口中显示相同的信息？

How to show popup on image map when hotspot aeras are clicked? I want to show relevant detail in popup related to any specific location which has hot spot? Note i am not using google map but a simple png image as a map.?

What I have tried:

I have tried to navigate from one page to other pages using href but now i don;t want to navigate to other pages and want to show same info in popup?

推荐答案

请参阅此 HTML地图标记 [ ^ ]

HTML教程 - 图像地图 [ ^ ]

onclick Event [ ^ ]

refer this HTML map tag[^]
HTML tutorial - Image maps[^]
onclick Event[^]

<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>

这篇关于单击热点aeras时如何在图像地图上显示弹出窗口？引导的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！