html - 图像 map 有哪些合理的替代方案？

Question

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

我的导航菜单是这样的:

Answer 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 degrees to radian

您将获得:

-10 degrees = -0.174532925 radian

然后将值插入M21。

为什么要用这个方法

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