HTML 图像地图还在使用吗？
人们还在使用旧的 HTML 图像地图吗？那些：
<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...
或者有更新、更好的选择吗？
Do people still use the old HTML Image Maps? The ones with:
<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...
Or is there a newer, better alternative?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（9）
是的，人们仍然使用图像地图。另一种方法是使用绝对定位和 CSS 来定位元素，但这并不一定更好。它也不允许您拥有像图像映射中那样的形状
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
它们符合 HTML5 规范，因此不会被弃用。
您仍然可以自由地使用它们，它们在 Web 开发中当然仍然占有一席之地。或者我可以说，在极少数情况下，您可以通过图像映射最好地解决某些问题。
They are in the HTML5 specification, so they will not get deprecated.
You can still freely use them, they certainly still have their place in web development. Or I could say, those rare occasions exist where you can best solve something with an image map.
使用 CSS 或图像映射的替代解决方案是使用嵌入到 HTML dom 中的 SVG 图形。
本教程介绍了如何使用此技术实现鼠标悬停效果的一个教程：http://www .petercollingridge.co.uk/data-visualization/mouseover-effects-svgs
关键要点是 SVG 元素还会触发传统的 dom 事件，包括 onmouseover 和 onmouseout 。
An alternative solution to using CSS or image maps would be to make use of SVG graphics embedded into the HTML dom.
One tutorial on how to achieve mouseover effects using this technique is described in this tutorial: http://www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
The key takeaway being that SVG elements also trigger traditional dom events including onmouseover and onmouseout.
是的，html 图像地图很好，特别是如果您希望您的区域是多边形的话。您还可以使用 JavaScript 将翻转效果添加到地图中。这里有一个很好的教程和演示：
http://www.tutorialized.com/view/tutorial /图像地图滚动/3484
Yes html image maps are good especially if you want your area to be a polygon. You can add rollover effects to you map as well with javascript. There is a nice tutorial and demo here:
http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484
是的，我仍然使用图像映射，但是我的上一个项目使用了 Raphaël。启动并运行某些东西非常容易。
http://dmitrybaranovskiy.github.io/raphael/
从他们的网站：
漂亮的简单图像地图示例：
http://dmitrybaranovskiy.github.io/raphael/australia.html
Yes, I still use image maps, however my last project used Raphaël. It was pretty easy to get something up and running.
http://dmitrybaranovskiy.github.io/raphael/
From their web site:
Nice simple image map example:
http://dmitrybaranovskiy.github.io/raphael/australia.html
图像地图仍然采用 HTML5 规范，所有浏览器都支持。
它们可以使用 jQuery RWD 图像映射适应响应式设计：
https://github.com/stowball/jQuery-rwdImageMaps
它检测并自动调整图像映射的大小坐标。
它也可以作为插件供 WordPress 开发人员使用：
http://wordpress.org/plugins/responsive-image-maps/
简单且有效的解决方案。
Image Maps are still in HTML5 specifications, supported by all browsers.
They can be adapted to responsive design using jQuery RWD Image Maps:
https://github.com/stowball/jQuery-rwdImageMaps
It detects and automatically resize the image maps coordinates.
It's also available for Wordpress developers as plugin:
http://wordpress.org/plugins/responsive-image-maps/
Simple and effective solution.
虽然我很少看到它们在现代网站上使用，但我的客户似乎在他们的电子邮件活动中使用了它们。但是，我注意到并确认存在一些缩放问题与移动设备上的坐标系。
** 我知道这个线程已经过时了，我只是针对最近的电子邮件活动问题对此进行了一些额外的研究，并认为它可能会对其他人有所帮助。
第三方编辑
litmus.com 上的问题关于图像地图支持来自04/2014
While I rarely see them used on modern websites anymore, they do seem to be used by my clients in their email campaigns. However, I've noticed, and confirmed that there are some scaling issues with the coordinate system on mobile devices.
** I know this thread is old, I was just doing some additional research into this for a recent email campaign issue and thought it may help someone else down the line.
3rd party edit
The question on litmus.com on image map support is from 04/2014
是的，它仍然使用
图像映射允许用户通过单击图像的不同部分来超链接到许多页面。简单地通过使用图像映射，我们创建与同一图像的特定区域相关的坐标列表，并将超链接提供给不同的页面。地点。通过在单个图像中使用它，我们可以提供多个链接。
更多
Yes, it still used
An image map allows a user to hyperlink to many pages by clicking different parts of an image.Simply by using image map we create lists of coordinates relating to a specific area of the same image and give the hyperlink to a different location. By using this within a single image we give multiple links.
More
图像地图在 html 和 html5 中是非常有趣的选项，它们仍在使用，我个人很喜欢它，因此我在移动设备中发现了问题，我的问题与缩放有关，
是的，我自己经历过，但是我是一名注册 html html5 的学生，对于初学者，我想关注 w3chools 链接
http://www.w3schools.com/html/html_images。 asp
你将从这个[页面中获益良多]
image map is quite interesting option in html and html5 they are still being use and i personally love it i therefore find issuse in mobile devices my issue is relatd to scaling
yes i have experience it my self however i am a student enrolled in html html5 and for begineers i would like to follow w3chools link
http://www.w3schools.com/html/html_images.asp
you will gain alot from this [page