是否仍在使用HTML图片地图？

113

人们是否仍然使用旧的HTML图像地图？具有：

<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...

还是有更新，更好的选择？

html imagemap

— ss888
source

1

当您问是否有更好的东西时，您应该提供一种比较的方法。以哪种方式或出于什么目的更好？我们拥有比图像地图更强大的工具，也更复杂……

— Jeff Parker

2

好点-我很长时间没有使用图像映射，并且认为它可能已被改进的编码方法所取代。

— ss888 2011年

1

基于Javascript /图层的功能以及Flash几乎取代了我遇到的所有内容的图像地图……我不记得上次看到现役的时候了。但是，如果您有特定的目的，则可能更容易获得更具体的答案:)

— Jeff Parker

21

在这个时代，我宁愿避免使用Flash。

— ss888 2011年

4

如果您正在寻找快速执行，快速运行且仅是轻度邪恶的事情，那么图像地图就可以完成任务。在我看来，没有得到广泛支持的替代产品能够以相同的速度完成这项工作。现在，如果您有时间使用SVG，Canvas，并且不介意从支持的浏览器列表中排除IE，则可以使用…

— Jeff Parker

53

是的，人们仍然使用图像地图。一种替代方法是使用绝对定位和CSS定位元素，但这不一定更好。它还不允许您具有像图像映射中那样的形状

— 约翰·P
source

好的，所以html图像映射仍然不错吗？如何添加悬停/翻转效果？

— ss888 2011年

我对图像地图的主要问题是，与它们关联的图像不同，它们无法缩放到浏览器或屏幕尺寸。我希望OP能够研究SVG格式

— Martin

2

您必须根据图像的大小对其进行缩放。使图像尺寸相对于窗口尺寸。然后始终将宽高比与图片比例进行比较，然后使用javascript覆盖坐标。基于jQuery的图像大小事件处理程序是$（window）.resize（function（）{.... yourcode ...}）;

— skidadon的

46

它们属于HTML5规范，因此不会被弃用。

您仍然可以自由使用它们，它们在Web开发中当然仍然占有一席之地。或者我可以说，在那些罕见的情况下，您可以使用图像映射来最好地解决问题。

— 卡帕
source

19

使用CSS或图像映射的替代解决方案是利用嵌入到HTML dom中的SVG图形。

本教程介绍了一个有关如何使用此技术实现鼠标悬停效果的教程：http : //www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs

关键要点在于SVG元素还会触发传统的dom事件，包括onmouseover和onmouseout。

— 诺曼·H
source

1

+1 SVG是图像贴图的最佳直接替代方法，因为可以进行任何任意形状的交互。通过为SVG元素提供图像填充，可以创建与图像贴图非常相似的方法，其中矢量坐标将光栅像素图像切碎。但是即使这样，在某些情况下，区域地图也可能更好（它们更简单，并且不裁剪图像，有时可能需要这样做）。

— user56reinstatemonica8 2013年

18

是的，html图像地图很好，尤其是如果您希望您的区域是多边形。您也可以使用javascript将过渡效果添加到地图中。这里有一个很好的教程和演示：

http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484

— 失落的林
source

8

+1-尽管您可以使用CSS和绝对定位来做很多事情，但是图像地图仍然是检测非矩形多边形区域上悬停的唯一方法。

— Blazemonger，2011年

10

图像地图仍符合HTML5规范，所有浏览器均支持。

它们可以使用jQuery RWD Image Maps进行自适应设计：https : //github.com/stowball/jQuery-rwdImageMaps

它检测并自动调整图像地图坐标的大小。

它也可以作为插件供Wordpress开发人员使用：http : //wordpress.org/plugins/sensitive-image-maps/

简单有效的解决方案。

— 丹尼尔·B
source

9

是的，我仍然使用图像地图，但是我的上一个项目使用的是Raphaël。安装并运行起来很容易。

http://dmitrybaranovskiy.github.io/raphael/

从他们的网站：

Raphaël使用SVG W3C Recommendation和VML作为创建图形的基础。这意味着您创建的每个图形对象也是DOM对象，因此您可以附加JavaScript事件处理程序或稍后对其进行修改。Raphaël的目标是提供一种适配器，使绘图矢量艺术兼容跨浏览器且易于使用。

不错的简单图片地图示例：

http://dmitrybaranovskiy.github.io/raphael/australia.html

— 戴维·纽康
source

2

您自己花费很多时间来修复链接，而不必抱怨和低落：(

— David Newcomb

2

亲爱的大卫，我删除了弃权票。您希望我如何修复刚刚断开的链接？我将http://raphaeljs.com/完全删除，仅提供Github示例。

— orschiro 2016年

6

堆栈站点的重点是协作。如果看到断开的链接，则请修复它。不要以断开的链接的方式来考虑它，它们是指向资源的断开的指针。如果资源已移动，请更新链接，使其指向资源的新位置：这很重要。Raphaeljs曾经拥有自己的网站，但显然已经迁移到GitHub。我们会把人们送回Google来找到它现在的住处吗？还是我们帮助他们离开这里？澳大利亚的例子就是一个例子，只是生活在不同的地方。

— David Newcomb

的 http://raphaeljs.com/当域注册过期时，链接最终将断开，但是现在对其进行了重定向，使世界上的每个人都有机会更新其链接。也许@orschiro，您可以从本文中的内容开始，然后在此处的SO上进行协作。

— David Newcomb

1

明白了，谢谢大卫！我更新了回复并修复了链接。:-)

— orschiro 2016年

4

虽然我很少再看到它们在现代网站上使用过，但我的客户似乎在他们的电子邮件广告系列中使用了它们。但是，我注意到了，并确认移动设备上的坐标系存在一些缩放问题。

**我知道这个主题很老，我只是在针对最近的电子邮件活动问题对此做一些额外的研究，并认为这可能会帮助其他人。

第三方

图像地图支持上litmus.com的问题始于2014 年4月

图像映射不支持ALT标签，当未加载图像时，ALT文本不会显示在某些客户端中。

图像地图的使用通常会导致使用大图像，这可能会导致可传递性问题并阻碍下载速度（这对移动用户尤为重要）。

最重要的是，在缩放图像时，iOS（iphone / ipad）不会缩放图像地图链接坐标，这会断开链接。由于iOS代表着大多数打开电子邮件（iPhone + iPad = 38％，通过http://emailclientmarketshare.com/），因此这一点很重要。

— 主轴79
source

0

是的，它仍然使用

图像地图允许用户通过单击图像的不同部分来超链接到许多页面。仅通过使用图像地图，我们就可以创建与同一图像的特定区域有关的坐标列表，并将超链接指定给其他位置。通过在单个图像中使用它，我们可以提供多个链接。

更多

— Srikrushna
source

-2

图像映射是html和html5中非常有趣的选项，它们仍在使用，我个人很喜欢它，因此我发现在移动设备中存在问题，我的问题与缩放有关

是的，我有经历过我的自我，但是我是一名注册html html5的学生，对于初学者，我想关注w3chools链接

http://www.w3schools.com/html/html_images.asp

您将从此[页面

— Shoua Iqbal
source