優雅地擴大鏈接響應區域

合理地擴大頁面鏈接響應區域可以提高網頁的易用性。同時還要兼顧到鏈接的交互一致性以及視覺上的平衡，就需要做一些特殊的處理。

實例一：一張圖配一個鏈接。

常規的做法有以下幾種：

第一種是最常規的，只有鏈接可點，但整張圖不可點，點起來還蠻累的。

第二種是把整張圖作為一個鏈接，鏈接響應區域是夠大，但其實那個鏈接就比較尴尬，不夠優雅。

第三種是弄兩鏈接，文本鏈接之外，圖本身再配個鏈接。這個比以上兩種都好一些，但仍然不夠理想，因為兩個鏈接的交互一致性不夠，用戶對點圖和點鏈接是不是去同一個地方會存在疑慮。

這樣或許會優雅一些：

圖片可點，鼠標移入圖片上，鼠標變手型的同時文本鏈接變為hover狀態。這樣即有足夠的鏈接響應區域，又有很好的交互一致性，暗示用戶點圖和點鏈接去的是同一個地方，如圖所示：

前端代碼角度上，就是把鏈接a標簽包住整個圖，那段文字用其他標簽表示，比如span，再定義a的hover狀態下，把span變成鏈接色，並加上下劃線，來模擬hover效果。

實例二，可鏈接的標題配一段對標題的詳細描述。

在這個例子中，視覺角度來看，一片文字需要主次清晰，所以鏈接色只加在了標題上。那麼詳細描述部分該不該響應點擊呢？非鏈接色出hover效果會不會有點怪呢？即使決定這兒可以鏈接，那hover效果導致出現大片的hover色和多行下劃線，視覺設計師會跟你急吧。

這樣或許會優雅一些：

讓詳細描述響應點擊，同時讓hover效果出現在標題上。如圖：

還有更復雜的模塊，可以套用這個方式來做，比如下面這個例子：

另外一些說明：

1、前端代碼問題

雖然在html4中，作為inline屬性的a只能在裡面嵌套inline的標簽，可以看下XHTML1.1標簽列表、屬性和嵌套規則（抱歉未找到HTML4的，它們類似）。但在html5中，語法定義者擴大了它的嵌套能力，我們可以用a把各種block標簽統統包進來。詳見html5中對a的特別說明：http://www.w3.org/TR/2010/WD-html5-20100304/text-level-semantics.html#the-a-element （感謝鎢龍提供資料）。畢竟HTML5還處於草案階段，這種嵌套方式，還是偶爾會出現一些對鏈接的浏覽器渲染問題，但目前還未發現出錯規律。

2、a標簽包含的整個區域內，只響應鏈接了，文本拷貝比較麻煩點，需要在更大范圍外進行拷貝。所以如果對拷貝文字有要求的模塊，不適合采用這個方式。

3、這個方案有個附帶的好處，因為整個模塊只要一個鏈接，如果是個手工維護的模塊，更新的時候很省事。