人们还在使用旧的HTML图像地图吗？那些包含：
<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...
还有没有更新的、更好的替代方案？
HTML图像映射仍在使用吗？
119
- ss888
10
1当你询问是否有更好的东西时，你应该提供一个比较的手段。更好在哪方面，或者为了什么目的？我们可以使用比图像映射更强大、更复杂的工具。 - Jeff Parker
4好的观点 - 我已经很久没有使用图像映射了，认为它可能已经被一种更好的编码方法所取代。 - ss888
2JavaScript/基于层的功能和Flash已经在我接触到的几乎所有东西中取代了图像映射...我已经记不起上一次看到它在活跃状态下了。但是，如果您有特定的目的，更具体的答案可能更容易获得 :) - Jeff Parker
26现在这个时代，我宁愿避免使用Flash，哈哈。 - ss888
4如果你想要做一些快速、运行迅速且只是稍微有点不好的事情，那么图像地图就能胜任。在我看来，没有广泛支持的替代品能够以同样的速度完成工作。如果你有时间使用SVG、画布，并且不介意将IE排除在你支持的浏览器列表之外... - Jeff Parker
显示剩余5条评论
9个回答
54
是的，人们仍然使用图像映射。另一种选择是使用绝对定位和CSS来定位元素，但这并不一定更好。它也不能让您拥有像图像映射中那样的形状。
- JohnP
3
1好的，那么HTML图像映射仍然不错吗？添加悬停/滑过效果怎么样？ - ss888
我对图像映射的主要问题是，与它们相关联的图像不同，它们不能按照浏览器或屏幕大小进行缩放。我希望原帖作者能够研究SVG格式。 - Martin
2你需要根据图像的大小进行缩放，使图像大小相对于窗口大小。然后始终将宽度/高度比率与图像映射比率进行比较，然后使用JavaScript覆盖坐标。基于jQuery的图像大小事件处理程序是$(window).resize(function() { ....yourcode... });。 - skidadon
24
一个替代使用CSS或图像映射的解决方案是利用嵌入到HTML dom中的SVG图形。
有一篇关于如何使用这种技术实现鼠标悬停效果的教程在这里描述：http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
关键是，SVG元素也会触发传统的dom事件，包括onmouseover和onmouseout。
- Norman H
1
2+1 SVG是与图像映射最直接的替代品，因为它可以与任意形状进行交互。可以创建非常类似于图像映射的东西，其中矢量坐标将光栅像素图像分割成小块，通过给SVG元素添加图像填充。但即使如此，在某些情况下，区域映射可能更好（它们更简单，并且不会裁剪图像，这有时可能是可取的）。 - user56reinstatemonica8
18
如果您想让区域成为多边形，那么HTML图像地图很不错。您还可以使用JavaScript向地图添加滚动效果。这里有一个很好的教程和演示：
http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484
- LostLin
1
8虽然CSS和绝对定位功能很强大，但是图像映射仍然是唯一能够检测非矩形多边形区域悬停的方法。 - Blazemonger
10
图像地图仍在HTML5规范中，并且被所有浏览器支持。
它们可以使用jQuery RWD Image Maps适应响应式设计： https://github.com/stowball/jQuery-rwdImageMaps
它能检测并自动调整图像地图的坐标。
该解决方案也可作为WordPress插件供开发人员使用： http://wordpress.org/plugins/responsive-image-maps/
简单而有效的解决方案。
- Daniele B
10
是的，我仍然使用图像映射，不过我的最后一个项目使用了Raphaël。它非常容易上手。
http://dmitrybaranovskiy.github.io/raphael/
从他们的网站上可以看到：
Raphaël ['ræfeɪəl] 使用SVG W3C推荐和VML作为基础来创建图形。这意味着您创建的每个图形对象也是DOM对象，因此您可以附加JavaScript事件处理程序或稍后修改它们。Raphaël的目标是提供一个适配器，使绘制矢量图形兼容跨浏览器并易于操作。
漂亮简单的图像映射示例：
- David Newcomb
6
3你本可以自己修复链接，而不是抱怨并投反对票:(。 - David Newcomb
2亲爱的David，我取消了踩的评价。你希望我如何修复那个链接，因为它只是简单地损坏了？我将完全删除
http://raphaeljs.com/ ，只提供Github的示例。 - orschiro7堆栈网站的重点是协作。如果您看到一个损坏的链接，如果可以的话请修复它。不要将其视为损坏的链接，而是指向资源的损坏指针。如果该资源已移动，请更新链接，使其指向资源的新位置：这才是重要的。Raphaeljs曾经有自己的网站，但显然已经迁移到GitHub。我们是让人们回到Google去找它现在在哪里吗？还是我们帮助他们从这里开始寻找？澳大利亚的例子与之相同，只是位于不同的地方。 - David Newcomb
http://raphaeljs.com/ 这个链接最终会因为域名注册到期而失效，但现在有一个重定向，让全世界的人都有机会更新他们的链接。也许 @orschiro 你可以从文章中开始，并在 SO 上增加协作努力。 - David Newcomb1明白了，谢谢David！我已经更新了回复并修复了链接。 :-) - orschiro
我认为这个不是响应式的。即使在演示中也没有声明meta viewport。 - ints
4
虽然现代网站上很少见到它们的使用，但我发现我的客户在他们的电子邮件活动中似乎仍在使用它们。但是，我注意到，并且已经确认移动设备上的坐标系统存在一些缩放问题。
** 我知道这个帖子很旧了，我只是为了解决最近的电子邮件活动问题而进行了一些额外的研究，并认为它可能会帮助其他人。
第三方编辑
litmus.com上关于图像映射支持的问题是来自04/2014年
图像映射不支持ALT标签，在某些客户端中未加载图片时不显示ALT文本。
图像映射的使用通常会导致使用大型图片，这可能会导致传递问题并影响下载速度（特别是对于移动用户来说非常重要）。
最重要的是，iOS（iPhone / iPad）在缩放图像时不会缩放图像映射链接坐标，从而使链接断开。由于iOS占据了大多数的电子邮件打开率（iPhone + iPad = 38％，通过http://emailclientmarketshare.com/），这一点很重要。
- spindle79
0
是的，它仍在使用。
图像映射允许用户通过单击图像的不同部分超链接到许多页面。仅通过使用图像映射，我们创建与同一图像的特定区域相关联的坐标列表，并将超链接给不同的位置。通过在单个图像中使用此功能，我们可以提供多个链接。
- Srikrushna
-2
图像映射是 HTML 和 HTML5 中相当有趣的选项，它们仍在使用中，我个人非常喜欢它。然而，在移动设备上我发现了一些问题，我的问题与缩放有关。
是的，我自己也有过这样的经历，但我是一名学生，正在学习 HTML 和 HTML5，对于初学者，我想跟随 W3Schools 的链接。
http://www.w3schools.com/html/html_images.asp
你会从这个页面中获得很多收益。
- Shoua Iqbal
网页内容由stack overflow 提供, 点击上面的可以查看英文原文，
原文链接
原文链接