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

實(shí)例一：一張圖配一個鏈接。

常規(guī)的做法有以下幾種：
第一種是最常規(guī)的，只有鏈接可點(diǎn)，但整張圖不可點(diǎn)，點(diǎn)起來還蠻累的。

第二種是把整張圖作為一個鏈接，鏈接響應(yīng)區(qū)域是夠大，但其實(shí)那個鏈接就比較尷尬，不夠優(yōu)雅。

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

這樣或許會優(yōu)雅一些：
圖片可點(diǎn)，鼠標(biāo)移入圖片上，鼠標(biāo)變手型的同時文本鏈接變?yōu)閔over狀態(tài)。這樣即有足夠的鏈接響應(yīng)區(qū)域，又有很好的交互一致性，暗示用戶點(diǎn)圖和點(diǎn)鏈接去的是同一個地方，如圖所示：

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

實(shí)例二，可鏈接的標(biāo)題配一段對標(biāo)題的詳細(xì)描述。

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

這樣或許會優(yōu)雅一些：
讓詳細(xì)描述響應(yīng)點(diǎn)擊，同時讓hover效果出現(xiàn)在標(biāo)題上。如圖：

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

另外一些說明：

1、前端代碼問題
雖然在html4中，作為inline屬性的a只能在里面嵌套inline的標(biāo)簽，可以看下XHTML1.1標(biāo)簽列表、屬性和嵌套規(guī)則（抱歉未找到HTML4的，它們類似）。但在html5中，語法定義者擴(kuò)大了它的嵌套能力，我們可以用a把各種block標(biāo)簽統(tǒng)統(tǒng)包進(jìn)來。詳見html5中對a的特別說明：http://www.w3.org/TR/2010/WD-html5-20100304/text-level-semantics.html#the-a-element （感謝鎢龍?zhí)峁┵Y料）。畢竟HTML5還處于草案階段，這種嵌套方式，還是偶爾會出現(xiàn)一些對鏈接的瀏覽器渲染問題，但目前還未發(fā)現(xiàn)出錯規(guī)律。
2、a標(biāo)簽包含的整個區(qū)域內(nèi)，只響應(yīng)鏈接了，文本拷貝比較麻煩點(diǎn)，需要在更大范圍外進(jìn)行拷貝。所以如果對拷貝文字有要求的模塊，不適合采用這個方式。
3、這個方案有個附帶的好處，因為整個模塊只要一個鏈接，如果是個手工維護(hù)的模塊，更新的時候很省事。

來源：http://ued.koubei.com/?p=1233