图像 <area> 地图有哪些合理的替代方案？答案

【问题标题】：What are some reasonable alternatives to an image <area> map?图像 <area> 地图有哪些合理的替代方案？
【发布时间】：2011-09-15 21:30:00
【问题描述】：

<area> 仍然是处理不规则导航菜单的最佳方法，还是有更好的方法？

我的导航菜单如下所示：

【问题讨论】：

标签： html navigation imagemap area

【解决方案1】：

您可以使用标准导航标记：

<div id="nav">
    <ul>
        <li><a class="active" href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
        <li><a href="#">Item</a></li>
    </ul>
</div>

然后进行 2D CSS 变换（围绕 Y 轴倾斜元素）：

#nav {
    -webkit-transform: skewY(-10deg);
    -moz-transform: skewY(-10deg);
    -ms-transform: skewY(-10deg);
    -o-transform: skewY(-10deg);
    filter: progid:DXImageTransform.Microsoft.Matrix(
        M11=1, M12=0,
        M21=-0.174532925, M22=1);
    transform: skewY(-10deg);    
}

查看此fiddle 以获取实时示例。浏览器支持信息见this。

如何编写 IE 过滤器

通过在 google 中输入以下内容将 -10 度转换为弧度：

-10 度到弧度

你会得到：

-10 度 = -0.174532925 弧度

然后将值插入M21。

为什么要使用这种方法

您担心页面加载时间，不希望对图片进行另一个 HTTP 请求。
标准导航标记具有更好的语义，尤其是当您切换到 HTML5 并使用屏幕阅读器用来确定导航位置的 nav 元素时。

【讨论】：

对不起...我没有看到你答案的最后一行。 :)
caniuse.com/transforms2d 看起来这对于 IE8 来说是不行的。 :(
这真的很有趣，但是为什么不直接使用图像映射呢？仅使用 CSS 就很难让导航显示得像他原来的帖子中那样干净（更不用说跨浏览器的一致性了）。你发布的小提琴肯定有锯齿状的情况。单个图像的开销，特别是考虑到它将立即缓存并且仅在第一次加载时才真正开销，似乎非常无关紧要。要避免使用非常简单、100% 浏览器支持的构造，这似乎需要做很多工作。
@jamitre 我同意 100%，但 OP 要求另一种方式。
@jamietre 是的，在某些操作系统和浏览器组合中，您会看到锯齿。除此之外，它可以毫不费力地在所有浏览器中看起来与原始帖子中的完全相同。当您构建将被 数百万 用户使用的可扩展网站时，单个图像的开销就会发挥作用。最好的 http-request 是你从未做过的！想一想：如果 OP 突然决定产生悬停效果怎么办？

【解决方案2】：

没有看到任何代码或您实际尝试完成的任何事情，我可以含糊地说，是的。您可以使用带有 id 列表项的列表并手动将它们放置在您的页面上。

但同样，如果没有看到您要完成的工作，很难说。

【讨论】：