HTML图像地图仍在使用吗？

Question

人们仍然使用旧的HTML图像地图吗？那些:

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

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

Answer 1

是的,人们仍然使用图像地图.另一种方法是使用绝对定位和CSS来定位元素,但这不一定更好.它也不允许您拥有像图像映射中的形状

对此也是如此:http://www.svennerberg.com/examples/imagemap_rollover/ (5认同)
你必须用图像的大小来缩放它.使图像大小相对于窗口大小.然后总是将宽度/高度比率与图像映射比率进行比较,然后使用javascript来覆盖坐标.基于jquery的图像大小事件处理程序是$(window).resize(function(){.... yourcode ...}); (2认同)

Answer 2

您仍然可以自由地使用它们,它们当然仍然在Web开发中占有一席之地.或者我可以说,在那些罕见的场合,你可以用图像地图最好地解决问题.

Answer 3

使用CSS或图像映射的另一种解决方案是利用嵌入到HTML dom中的SVG图形.

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

关键的一点是,SVG元素也会触发传统的dom事件,包括onmouseover和onmouseout.

+1 SVG 是图像映射的最佳直接替代方案，因为可以与任何任意形状进行交互。可以创建与图像映射非常相似的东西，其中矢量坐标切碎光栅像素图像，[通过为 SVG 元素提供图像填充](http://stackoverflow.com/questions/3796025/fill-svg-path-element-with -背景图像）。但即便如此，在某些情况下区域地图可能会更好（它们更简单，并且不会裁剪图像，这有时可能是理想的）。 (2认同)

Answer 4

是的html图像地图是好的,特别是如果你想要你的区域是一个多边形.您可以使用javascript向地图添加翻转效果.这里有一个很好的教程和演示:

Answer 5

图像映射仍为HTML5规范,并受所有浏览器支持.

它们可以适应使用jQuery RWD图像映射的响应式设计:https: //github.com/stowball/jQuery-rwdImageMaps

它会检测并自动调整图像映射坐标的大小.

它也适用于Wordpress开发人员作为插件:http: //wordpress.org/plugins/responsive-image-maps/

简单有效的解决方案.

Answer 6

是的,我仍然使用图像地图,但是我的上一个项目使用了Raphaël.获得一些东西很容易.

从他们的网站:

Raphaël['ræfeɪəl]使用SVG W3C Recommendation和VML作为创建图形的基础.这意味着您创建的每个图形对象也是一个DOM对象,因此您可以附加JavaScript事件处理程序或稍后修改它们.Raphaël的目标是提供一个适配器,使绘图矢量艺术兼容跨浏览器和简单.

好简单的图像地图示例:

堆栈站点的重点是协作.如果您看到链接损坏,请尽可能修复.不要以破坏链接的方式来考虑它们,它们是资源的破碎指针.如果资源已移动,则更新链接以使其指向资源的新位置:这是重要的事情.拉斐尔曾经拥有它自己的网站,但它显然已转移到GitHub.我们是否会将人们发回Google以查找它现在的位置？或者我们帮助他们离开这里？澳大利亚的例子就是它只是生活在不同的地方. (5认同)
您自己花费很多时间来修复链接，而不必抱怨和低落:( (2认同)
亲爱的大卫，我删除了反对票。您希望我如何修复刚刚断开的链接？我会完全删除http://raphaeljs.com/，仅提供Github示例。 (2认同)