什麼是一些圖像<area>地圖的一些合理的替代方案？

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過濾

轉換-10度到弧度在谷歌鍵入此：

-10度到弧度

您將獲得：

-10度= -0.174532925弧度

然後插入值M21。

爲什麼你會用這個方法

1. 你關心頁面加載時間，你不想要的圖像另一個HTTP請求。
2. 標準導航標記具有更好的語義，特別是如果切換到HTML5並使用屏幕閱讀器使用的nav元素來確定導航的位置。

Answer 2

沒有看到的你實際上要完成的任何代碼或任何東西，我能說的含糊，是的。您可以使用帶有id列表項的列表並手動將它們放置在您的頁面上。

但是，再次，沒有看到你想要完成的事情，這很難說。