使用图像映射生成器有什么好的替代方法？

Question

我有一个大图像,我想让图像的某些部分可点击.我还想指定可点击区域的形状(方形,圆形,自定义).如果不依赖Javascript,我如何使用CSS和HTML来创建交互式图像映射？具有可靠的"热点"并突出显示区域而不依赖于生成SVG坐标.我用谷歌找到的所有在线图像地图生成器都没有提供我认为的任何图像工具的标准基本功能.

Answer 1

这个在我看来是最好的在线(离线,但Dreamweaver是最好的):http: //www.maschek.hu/imagemap/imgmap

Answer 2

GIMP(图形图像处理程序)做得非常好...... http://www.makeuseof.com/tag/create-image-map-gimp/

Answer 3

您可以使用在线图像地图等在线工具

Answer 4

为什么不使用 HTML/CSS 的组合来代替呢？图像地图已过时。

顺便说一句，这也是搜索引擎优化的:)

源代码如下：

.image-map {
  background: url('https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png');
  width: 272px;
  height: 92px;
  display: block;
  position: relative;
  margin-top:10px;
  float: left;
}

.image-map > a.map {
  position: absolute;
  display: block;
  border: 1px solid green;
}

<div class="image-map">
    <a class="map" rel="G" style="top: 0px; left: 0px; width: 70px; height: 95px;" href="#"></a>
    <a class="map" rel="o" style="top: 0px; left: 70px; width: 50px; height: 95px" href="#"></a>
    <a class="map" rel="o" style="top: 0px; left: 120px; width: 50px; height: 95px" href="#"></a>
    <a class="map" rel="g" style="top: 0px; left: 170px; width: 40px; height: 95px" href="#"></a>
    <a class="map" rel="l" style="top: 0px; left: 210px; width: 20px; height: 95px" href="#"></a>
    <a class="map" rel="e" style="top: 0px; left: 230px; width: 40px; height: 95px" href="#"></a>
</div>

编辑：

在这个答案收到无数负面意见之后，我必须回来说，我可以清楚地看到您不同意我的答案，但我个人仍然认为这是比图像地图更好的选择。

当然它不能做多边形，它可能在手动页面缩放上有问题，但我个人觉得图像地图已经过时了，尽管仍然符合 html5 规范。（现在尝试使用 html5 canvas 来复制它们更有意义）

但我想这个问题的目标受众不同意我的观点。

您还可以检查此HTML 图像地图是否仍在使用？并查看投票最高的答案仅供参考。