HTML Image Maps 还在使用吗？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/5249502/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Are HTML Image Maps still used?
提问by ss888
Do people still use the old HTML Image Maps? The ones with:
人们还在使用旧的 HTML Image Maps 吗？那些有：
<map name="test" id="test">
<area shape="poly" alt="" title="" coords=...
Or is there a newer, better alternative?
或者是否有更新、更好的选择？
采纳答案by JohnP
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
是的，人们仍然使用图像映射。另一种方法是使用绝对定位和 CSS 来定位元素，但这不一定更好。它也不允许你有像图像地图那样的形状
回答by kapa
They are in the HTML5 specification, so they will not get deprecated.
它们在 HTML5 规范中，因此不会被弃用。
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.
您仍然可以自由使用它们，它们在 Web 开发中肯定仍然占有一席之地。或者我可以说，在极少数情况下，您可以最好地使用图像映射解决问题。
回答by Norman H
An alternative solution to using CSS or image maps would be to make use of SVG graphics embedded into the HTML dom.
使用 CSS 或图像映射的另一种解决方案是使用嵌入到 HTML dom 中的 SVG 图形。
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
本教程介绍了有关如何使用此技术实现鼠标悬停效果的教程：http: //www.petercollingridge.co.uk/data-visualisation/mouseover-effects-svgs
The key takeaway being that SVG elements also trigger traditional dom events including onmouseoverand onmouseout.
关键要点是 SVG 元素也会触发传统的 dom 事件，包括onmouseover和onmouseout。
回答by LostLin
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:
是的 html 图像地图很好，特别是如果您希望您的区域是多边形。您也可以使用 javascript 向地图添加翻转效果。这里有一个很好的教程和演示：
http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484
http://www.tutorialized.com/view/tutorial/Image-Map-Rollover/3484
回答by Daniele B
Image Maps are still in HTML5 specifications, supported by all browsers.
Image Maps 仍然是 HTML5 规范，所有浏览器都支持。
They can be adapted to responsive design using jQuery RWD Image Maps: https://github.com/stowball/jQuery-rwdImageMaps
它们可以使用 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/
它也可用于 Wordpress 开发人员作为插件：http: //wordpress.org/plugins/responsive-image-maps/
Simple and effective solution.
简单有效的解决方案。
回答by David Newcomb
Yes, I still use image maps, however my last project used Rapha?l. It was pretty easy to get something up and running.
是的，我仍然使用图像映射，但是我的上一个项目使用了 Rapha?l。启动并运行某些东西非常容易。
http://dmitrybaranovskiy.github.io/raphael/
http://dmitrybaranovskiy.github.io/raphael/
From their web site:
从他们的网站：
Rapha?l ['r?fe??l] uses the SVG W3C Recommendation and VML as a base for creating graphics. This means every graphical object you create is also a DOM object, so you can attach JavaScript event handlers or modify them later. Rapha?l's goal is to provide an adapter that will make drawing vector art compatible cross-browser and easy.
Rapha?l ['r?fe??l] 使用 SVG W3C Recommendation 和 VML 作为创建图形的基础。这意味着您创建的每个图形对象也是一个 DOM 对象，因此您可以附加 JavaScript 事件处理程序或稍后修改它们。Rapha?l 的目标是提供一个适配器，使绘图矢量艺术兼容跨浏览器和容易。
Nice simple image map example:
漂亮的简单图像映射示例：
回答by spindle79
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 confirmedthat 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 supportis from 04/2014
litmus.com上关于图像地图支持的问题来自 04/2014
Image maps do not support ALT tags, when images aren't loaded the ALT text isn't displayed in some clients.
Image map usage generally results in using large images which can cause deliverability issues and hinder download speed (especially important to mobile users).
And most importantly, The iOS (iphone/ipad) doesn't scale the image map link coordinates when the image is scaled which breaks the links. Since iOS represents a large majority of email opens (iPhone + iPad = 38% via http://emailclientmarketshare.com/) this is important.
图像映射不支持 ALT 标签，当未加载图像时，某些客户端中不会显示 ALT 文本。
图像地图的使用通常会导致使用大图像，这会导致可交付性问题并阻碍下载速度（对移动用户尤其重要）。
最重要的是，当图像被缩放而断开链接时，iOS (iphone/ipad) 不会缩放图像映射链接坐标。由于 iOS 代表了绝大多数电子邮件打开（iPhone + iPad = 38%，来自http://emailclientmarketshare.com/），这很重要。
回答by Srikrushna
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.
图像地图允许用户通过单击图像的不同部分来超链接到许多页面。只需使用图像地图，我们就可以创建与同一图像特定区域相关的坐标列表，并提供指向不同位置的超链接。通过在单个图像中使用它，我们提供了多个链接。
回答by Shoua Iqbal
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
图像映射是 html 和 html5 中非常有趣的选项，它们仍在使用中，我个人很喜欢它，因此在移动设备中发现问题，我的问题与缩放有关
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
是的，我自己体验过，但是我是一名注册 html html5 的学生，对于初学者，我想关注 w3chools 链接
http://www.w3schools.com/html/html_images.asp
http://www.w3schools.com/html/html_images.asp
you will gain alot from this [page
你会从这个 [页面
