HTML 图像地图还在使用吗?

人们还在使用旧的 HTML 图像地图吗:

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

还是有更新更好的选择?

88255 次浏览

Yes, people do still use image maps. An alternative would be to position elements using absolute positioning and CSS but that's not necessarily better. It also doesn't allow you to have shapes like in image maps

是的 html 图像映射是很好的,特别是如果你想你的区域是一个多边形。您可以添加翻转效果到您的地图以及与 javascript。这里有一个不错的教程和演示:

Http://www.tutorialized.com/view/tutorial/image-map-rollover/3484

它们在 HTML5规范 中,因此不会被弃用。

你仍然可以免费使用它们,它们在 web 开发中仍然有一席之地。或者我可以说,在一些罕见的情况下,你可以用图像地图最好地解决问题。

An alternative solution to using CSS or image maps would be to make use of SVG graphics embedded into the HTML dom.

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

关键在于 SVG 元素也会触发传统的 dom 事件,包括 鼠标悬停老鼠出局

图像地图仍然在 HTML5规范中,受到所有浏览器的支持。

它们可以使用 jQuery RWD 图像地图进行响应式设计: Https://github.com/stowball/jquery-rwdimagemaps

它检测并自动调整图像映射坐标。

WordPress 开发者也可以使用这个插件: Http://wordpress.org/plugins/responsive-image-maps/

简单有效的解决方案。

是的,我仍然使用图像地图,但我的最后一个项目使用拉斐尔。让东西运转起来很容易。

Http://dmitrybaranovskiy.github.io/raphael/

来自他们的网站:

Raphaël [‘ ræfe l ]使用 SVG W3C推荐标准和 VML 作为基础 用于创建图形。这意味着您创建的每个图形对象都是 也是一个 DOM 对象,因此您可以附加 JavaScript 事件处理程序或 Raphaël 的目标是提供一个适配器 使绘图矢量艺术兼容的跨浏览器和方便。

漂亮的简单图像地图示例:

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

虽然我很少看到它们在现代网站上使用,但它们似乎确实被我的客户在他们的电子邮件活动中使用。然而,我注意到,在移动设备上的坐标系存在一些伸缩性问题。

我知道这个帖子已经很老了,我只是为了最近的一个电子邮件活动做了一些额外的研究,认为它可以帮助其他人。

第三方编辑

Litmus.com 上的问题来自2014年4月

图像映射不支持 ALT 标记,当图像没有加载时,ALT 文本不会显示在某些客户端中。

Image map usage generally results in using large images which can cause deliverability issues and hinder download speed (especially 对流动用户非常重要)。

最重要的是,iOS (iphone/ipad)在缩放图像时不会缩放图像地图链接坐标 由于 iOS 代表了绝大多数打开的电子邮件(iPhone + 这一点很重要。

在 html 和 html5中,image map 是一个非常有趣的选项,它们仍然在使用,我个人非常喜欢它。因此,我发现移动设备中存在一些问题,我的问题与缩放有关

是的,我有自己的经验,但我是一个学生注册在 html html 5和对于初学者,我想遵循 w3chools 链接

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

你会从这个[页面

是的,它还在使用

图像映射允许用户通过单击图像的不同部分来超链接到许多页面。简单地通过使用图像映射,我们创建与同一图像的特定区域相关的坐标列表,并给出指向不同位置的超链接。通过在单个图像中使用这种方法,我们提供了多个链接。

更多