Question

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

Answer 1

这个在我看来是最好的在线（离线，但Dreamweaver是最好的）： http://www.maschek.hu/imagemap/imgmap

Answer 2

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

Answer 3

您可以使用online Image Map

等在线工具

Answer 4

此服务是迄今为止我发现的最佳在线图像地图编辑：http://www.image-maps.com/

...但事实上它有点弱，我个人不再使用它了。我切换到GIMP，确实很不错。

来自莫比乌斯的回答并没有错，但在某些情况下，即使它看起来有点陈旧和生锈，你也必须使用图像地图。例如，在简报中，您无法使用HTML / CSS来执行您想要的操作。

Answer 5

还有Mappa - http://mappatool.com/。

它只支持多边形，但它们绝对是最难的部分：）

Answer 6

我发现Adobe Dreamweaver非常擅长。但是，它不是免费的。

Answer 7

如果您只生成多边形图像地图，这是一个很好的工具： http://niceutils.com/developer/imagemap-generator

Answer 8

为什么不使用HTML / CSS组合？图像映射已过时。

点击此处：http://jsfiddle.net/jsWdj/获取示例

这个btw也是搜索引擎优化的：）

源代码如下：

.image-map {
  background: url('http://www.google.com/intl/en_com/images/srpr/logo3w.png');
  width: 275px;
  height: 95px;
  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画布复制它们会更有意义）

但我猜这个问题的目标受众不同意我。

您还可以查看此Are HTML Image Maps still used?并查看评价最高的答案，仅供参考。

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

8 个答案: