使用图像映射生成器有啥好的替代方法？ [关闭]

Posted 2023-05-08

【中文标题】使用图像映射生成器有啥好的替代方法？ [关闭]

【英文标题】：What is a good alternative to using an image map generator? [closed]使用图像映射生成器有什么好的替代方法？ [关闭]

【发布时间】：2012-02-16 19:31:04

【问题描述】：

我有一张大图片，我想让图片的某些部分可点击。我还想指定可点击区域的形状（方形、圆形、自定义）。在不依赖 javascript 的情况下，如何使用 CSS 和 html 创建交互式图像地图？具有可悬停的“热点”和突出显示区域，而不依赖于生成 SVG 坐标。我使用 Google 找到的所有在线图像地图生成器都没有提供我认为任何图像地图工具的标准基本功能。

【问题讨论】：

htmlgoodies 成名的老乔烧伤建议 mapedit boutell.com/mapedit

heise.de/download/fast-image-map-1151488.html - 放大到 400% - 保存图像地图 - 免费

最好的另一个不关闭路径所以点击不起作用：developer.cdn.mozilla.net/media/uploads/demos/s/u/summerstyle/…

经过大约10次试用后，我可以推荐此服务summerstyle.github.io/summer

现在最好在softwarerecs.stackexchange.com提出这样的问题

【参考方案1】：

我认为这是最好的在线版本（离线但 Dreamweaver 最好）： http://www.maschek.hu/imagemap/imgmap

【讨论】：

@DanFromGermany 它是少数包含缩放功能的公司之一。它并没有你想象的那么糟糕。

这个还允许我粘贴到现有的图像映射中并对其进行调整。哪个好用！

这个在线工具更容易使用恕我直言：image-maps.com/map_image.php

这通常是我的目标，但目前不起作用

感谢 Dreamweaver 的推荐——就像一个魅力。 （在 Dreamweaver CC 中，您必须从实时模式切换到设计模式，然后打开并展开“属性”窗格。）

【参考方案2】：

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

【参考方案3】：

您可以使用online Image Map等在线工具

【参考方案4】：

这个服务是我目前发现的最好的在线图像地图编辑服务：http://www.image-maps.com/

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

mobius 的回答没有错，但在某些情况下，即使它看起来有点陈旧生锈，您也必须使用图像映射。例如，在时事通讯中，您不能使用 HTML/CSS 来做您想做的事情。

【参考方案5】：

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

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

【讨论】：

似乎不再存在。

【参考方案6】：

我发现 Adob​​e Dreamweaver 在这方面做得很好。但是，它不是免费的。

【参考方案7】：

为什么不使用 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 画布复制它们更有意义）

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

您也可以查看Are HTML Image Maps still used? 并查看投票率最高的答案，仅供参考。

【讨论】：

“方形、圆形、自定义”...你的解决方案能做到吗？

为什么会得到正确答案？问题不在于将图像分解为精灵。

我认为这是 MENU 替代品，而不是 imageMap 替代品。

"...我个人觉得图像映射已经过时，尽管仍然在 html5 规范中..." - 它们在规范中。因此它们并没有过时。与个人观点无关。

-1 "图像映射已过时。"请引用？正如@OliverMoran 指出的那样，这是 HTML5 规范本身，因此这些已过时的论点是无效的。