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

内容来源于 Stack Overflow,并遵循CC BY-SA 3.0许可协议进行翻译与使用

  • 回答 (2)
  • 关注 (0)
  • 查看 (65)

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

提问于
用户回答回答于

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

源代码如下:

.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画布复制它们会更有意义)

用户回答回答于

GIMP(图形图像处理程序)做得非常好....

扫码关注云+社区

领取腾讯云代金券