使用javascript在图像上点击可点击的点

Question

我有一个像这样的图像：

我想用不同的URL点击每个点，而且当鼠标在一个点上时我想实现一个弹出文本。

我怎样才能用javascript和css做到这一点？任何图书馆？

Answer 1

您可以通过图片的在线地图工具执行此操作。

我尝试从this链接映射您的图片。

您可以看到我在几个点上创建了一个可点击的链接，并将自定义文本设置为标题以在悬停时显示文字。

我希望这会对你有所帮助。感谢。

<img id="Image-Maps-Com-image-maps-2017-04-25-084654" src="https://i.stack.imgur.com/FbxJg.png" border="0" width="286" height="322" orgWidth="286" orgHeight="322" usemap="#image-maps-2017-04-25-084654" alt="" />
<map name="image-maps-2017-04-25-084654" id="ImageMapsCom-image-maps-2017-04-25-084654">
<area  alt="" title="custom-text" href="http://www.image-maps.com/" shape="rect" coords="228,156,255,181" style="outline:none;" target="_self"     />
<area  alt="" title="custom-text" href="http://www.image-maps.com/" shape="rect" coords="129,173,156,198" style="outline:none;" target="_self"     />
<area shape="rect" coords="284,320,286,322" alt="Image Map" style="outline:none;" title="Image Map" href="http://www.image-maps.com/index.php?aff=mapped_users_0" />
</map>

Answer 2

我为你写了一个小例子。您可以使用本机HTML执行此操作。

＆＃13;

＆＃13;

.container {
  position:relative;
}

.container img {
  width:200px;
}

.dot {
  color:white;
  position:absolute;
  padding:10px;
  background:black;
  border:1px solid white;
  border-radius:50%;
  font-size:0px;
  -webkit-transition: all 2s; /* Safari */
  transition: all 2s;
}

.dot:hover {
  text-indent: auto;
  width:auto;
  font-size:12px;
  z-index:1;
  border-radius:0;
}

＆＃13;

<div  class="container">
  <img src="https://images.craigslist.org/00808_ha1rdMjpXZR_1200x900.jpg" />
  <div class="dot" style="left:10px;top:10px;">
    I'm testing code
  </div>
  <div class="dot" style="left:50px;top:50px;">
    I'm testing code2
  </div>
  <div class="dot" style="left:10px;top:70px;">
    I'm testing code3
  </div>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您可以使用HTML标记执行此操作，请检查html中的标记，它可能会达到您的目的。

检查以下代码可能会对您有所帮助：

Demo Link

您还可以在Fabric.js的帮助下使用<canvas>或<svg>，您可以更加先进地完成任务。

检查此链接，您将获得与图像或画布和svg相关的非常酷的东西：

MDN - Canvas API Tutorial

谢谢

function runfunc(planetId) {
  console.log('You selected:', planetId);
}

.as-console-wrapper { max-height: 2.8em !important; }

<p>Click on the Sun or on one of the planets to see which one was selected.</p>

<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" alt="Sun" id="Sun" onclick="runfunc(this.id)">
  <area shape="circle" coords="90,58,3" alt="Mercury" id="Mercury" onclick="runfunc(this.id)">
  <area shape="circle" coords="124,58,8" alt="Venus" id="Venus" onclick="runfunc(this.id)">
</map>