图像区域没有变成图像地图中的可点击区域答案

【问题标题】：Image areas not turning into clickable area in Image Map图像区域没有变成图像地图中的可点击区域
【发布时间】：2015-12-01 20:32:05
【问题描述】：

我正在尝试创建一个如下所示的 HTML 图像映射（请在下面找到我的代码）：

h1 {
  background-color: red;
}

 <h1> This is Frame A </h1>


<img src="http://image.slidesharecdn.com/thesolarsystem-100324192727-phpapp01/95/the-solar-system-2-728.jpg?cb=1269517813" width="500" height="300" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="circle" coords="450,208" href="https://www.nasa.gov/sites/default/files/706436main_20121114-304-193blend_m6-orig_full.jpg" alt="Sun">
  <area shape="circle" coords="305,124" href="http://vignette2.wikia.nocookie.net/heman/images/3/36/Earth.jpg/revision/latest?cb=20130912205625" alt="Earth">
  <area shape="circle" coords="652,122" href="https://upload.wikimedia.org/wikipedia/commons/8/85/Venus_globe.jpg" alt="Venus">
</map>

图片显示在网页上，但是，太阳、地球和金星并没有变成可点击的东西，因此我可以将其定向到各自的图片。请让我知道我做错了什么？我是否正确指定了坐标？

我使用了以下Image Generator 来找出坐标：

【问题讨论】：

标签： html imagemap

【解决方案1】：

这是因为coords 需要三个项目而不是 2：x,y,radius。所以你需要为半径添加值（这里是一个例子）：

h1 {
  background-color: red;
}

 <h1> This is Frame A </h1>


<img src="http://image.slidesharecdn.com/thesolarsystem-100324192727-phpapp01/95/the-solar-system-2-728.jpg?cb=1269517813" width="500" height="300" alt="Planets" usemap="#planetmap">

<map name="planetmap">
  <area shape="circle" coords="330,118,60" href="https://www.nasa.gov/sites/default/files/706436main_20121114-304-193blend_m6-orig_full.jpg" alt="Sun">
  <area shape="circle" coords="205,70,30" href="http://vignette2.wikia.nocookie.net/heman/images/3/36/Earth.jpg/revision/latest?cb=20130912205625" alt="Earth">
  <area shape="circle" coords="452,82,35" href="https://upload.wikimedia.org/wikipedia/commons/8/85/Venus_globe.jpg" alt="Venus">
</map>

注意：由于您将图像的宽度和高度定义为width="500" height="300"，因此您需要更改x,y 坐标以进行调整。这就是我在回答中更改它们的原因。

【讨论】：

感谢您的回答。是的，我看到了添加半径，想知道你是如何得出各种半径值的？它们是准确的还是最好的猜测？
@John 他们只是我通过反复试验得出的最佳猜测:)
我明白了。所以没有特别的方法可以精确地找到这些值。
@John 您可能可以将图像放在 HTML5 Canvas 上并运行类似 k-means 的聚类算法。并通过将行星簇近似为圆形来测量它们的半径。但只是猜测它们并足够接近会容易得多。