图像映射和HTML5

Question

图像映射和HTML5

imagehtmlpolygonimagemap

7

这个问题更多的是哲学性的，而非技术性的。

我曾经自学成为一名网页开发者，当时网页开发者被称为网站管理员，我的首选工具是FrontPage，后来转用Evrsoft 1st Page 2000。那是我最后一次使用HTML图像映射。

现在是HTML5、AJAX、矢量画布、CSS 3D、jQuery、本地存储、触摸屏Safari等等。图像映射已经淡出了人们的视野，甚至Google也没有太多相关结果；只有W3C Schools的一篇必读文章和一些来自2004年的论坛帖子。

很明显，在过去用图像映射创建网站导航或类似的琐事是一个糟糕的想法，今天这种做法是不可原谅的。

但现在我需要在背景图片上创建一个多边形可点击区域。

如果是在图像映射中完成这项任务，我没有任何问题，因为它似乎就是为这种情况设计的，而且虽然我没有进行任何测试，但我无法想象任何浏览器会停止支持这个美妙运作多年的元素。但是我不禁想，今天肯定有更好的方法来完成这个任务。

我的网站开发哲学是先为IE5.5开发，然后设计Chrome边缘。这意味着网站首先需要在最古老的浏览器上基本运行，然后开始添加JS和CSS，使其更美观、更易用、更快速、更简单、更友好和更好。

因此，虽然我知道我可以在Raphaël中创建一个画布，并添加各种花哨的悬停效果等等，但我认为使功能像这样简单的东西不应该需要一个89 kb（或X kb）的JS库。甚至根本不需要JS。

我不知道CSS3是否有定义多边形区域的能力，但是尽管认识到CSS3引入的巨大可能性，我还是喜欢将任何在那里定义的东西作为非必要的装饰，以便优雅地降级。

那么，在今天的Web开发世界中，除了图像映射之外，有没有更跨浏览器的方法来定义多边形点击区域（最好是可通过jQuery的.hover()或至少CSS的:hover抓取），而不依赖于JavaScript或在少数浏览器中可用的CSS属性？移动设备怎么办？

- Emphram Stavanger

2

从 IE5.5 开始实在太疯狂了。实际上这只会对你自己造成伤害。我有一个相当高流量的网站（大约每月 50 万访问者），在过去的三年中，我没有一次访问是使用低于 IE6 的浏览器。在过去的一年中，IE6 占据了我的用户群体的大约 2%。 - Loktar

我并不是针对使用IE5.5的用户，也不打算让我的网站在其上看起来漂亮。我甚至没有IE5.5的副本来检查我的网站在其上的外观。然而，在构建时，我使用这种心态，以便可以保证我的网站在即使是最原始的浏览器上工作，无论其年龄如何（Lynx、Kindle、WAP/Nokia Navigator时代的浏览器、屏幕阅读器等）。它有助于将内容和结构保持为一个整体，将华丽和风格作为另一个方面。 - Emphram Stavanger

没有哲学可言 - 但是为了最小公分母而设计，不使用JavaScript会限制您的架构到一个非常原始的模型。没有ajax。所有数据都通过HTTP提交？没有客户端逻辑验证/逻辑/交互性？痛苦。除非您希望所有用户都拥有20世纪90年代的Web体验，否则您基本上正在谈论设计两个完全不同的网站实现。您无法“渐进式降级”ajax客户端/服务器模型；您将制作两个版本的网站。这只是太多额外的工作，没有回报。谁使用lynx？ - Jamie Treworgy

正如我所说，IE5.5不是我的目标，我也不会为其进行测试，但这是我构建网站骨架的基础，直到我开始考虑美化它并添加JS效果。通过AJAX提交很美妙，但JS真的可以成为表单提交这样核心功能的必要条件吗？也就是说，您的浏览器和设备必须支持并启用JS，否则我的网站上的每个表单都无法正常工作？当然，JS验证并不意味着可以忽略服务器端验证（另一种类似于IE5.5的方法）。 - Emphram Stavanger

“JS真的可以作为核心功能如表单提交的要求吗？” 为什么不呢？我再问一遍：谁在使用lynx？你会在哪一年决定需要一个1991年之后设计的技术基线？2015年？2020年？你限制自己只使用第一个HTML规范吗？那么为什么要限制自己使用那个时代的其他技术方面呢？ - Jamie Treworgy

显示剩余2条评论

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jamie Treworgy · Accepted Answer

为什么使用图像地图进行导航是不可原谅的？它就像任何其他工具一样，有其适用的时间和场合。使用带有javascript增强功能的imagemaps向后兼容，优雅降级，并且拥有100％的浏览器支持。它们不需要像flash那样的插件。自从Web浏览器诞生以来，它们就被广泛支持。仅仅因为某些东西很老，这并不意味着它没有用处；恰恰相反，这意味着它得到了很好的支持。

我编写了一个名为ImageMapster的jquery插件，以添加效果到imagemaps中，从而可以创建交互式图像而无需使用flash。在那些情况下，通过替换列表即可实现没有Javascript支持的具有相同功能的工具。个人认为，在没有JavaScript的情况下编写Web内容就像试图在没有轮胎的情况下驾驶汽车一样困难。现在，99％的网站都需要JavaScript才能正常工作。这不是1995年了。但是，如果您真的担心，imagemaps的基本导航功能仍然有效。没有办法仅通过CSS实现这一点-甚至是CSS3，如果您有不规则形状的区域。