跳到主要內容
:::|

9.1:H109100 盡量使用客戶端影像地圖替代伺服器端影像地圖連結

說明:對於視覺障礙者而言,由於伺服器端影像地圖需要使用者操作滑鼠的座標傳至伺服器端作影像地圖區域的計算,這樣會照成視覺障礙者瀏覽網頁上的限制。因此網頁開發者必須以用戶端影像地圖代替,並提供影像地圖中相對的文字型態的超連結,以供語音合成器辨別。

範例:以下不良設計是在IMG標籤中使用ismap屬性的伺服器端影像地圖設計:

不良設計

在IMG標籤中使用ismap屬性的伺服器端影像地圖設計。

不良設計:

< A href= " cgi-bin/imagemap/map2.txt " > 
< IMG src= " images/map2.gif " alt= " 台灣三大入口網站影像地圖 " ismap > 
< /A >

附註:map2.txt提供伺服器端影像地圖中連結區域的座標位置。

正確示範

在IMG標籤中使用usemap屬性的客戶端影像地圖來代替伺服器端影像地圖的設計。

正確範例:

< P > 
< IMG src= " images/map2.gif " width= " 472 " height= " 94 " usemap= " #Map1 " border= " 0 " alt= " 台灣三大入口網站 " > 
< /P > 
< MAP name= " Map1 " > 
< area shape= " rect " coords= " 10,8,158,86 " href= " http://www.yahoo.com.tw " alt= " Yahoo!奇摩網 " >
< area shape= " rect " coords= " 161,8,309,86 " href= " http://www.pchome.com.tw " alt= " PChome " > 
< area shape= " rect " coords= " 311,8,460,86 " href= " http://www.yam.com.tw " alt= " 蕃薯藤 " > 
< /MAP >

下面範例是同時使用伺服器端影像地圖(ismap)及客戶端影像地圖(usemap),當瀏覽器不支援伺服器端影像地圖(ismap)時,瀏覽器會使用客戶端影像地圖(usemap)來替代。

正確範例:

< A href= " cgi-bin/imagemap/map2.txt " > 
< IMG src= " images/map2.gif " alt= " 台灣三大入口網站影像地圖 " usemap= " #Map1 " ismap > 
< /A > 
< MAP name= " Map1 " > 
< area shape= " rect " coords= " 10,8,158,86 " href= " http://www.yahoo.com.tw " alt= " Yahoo!奇摩網 " >
< area shape= " rect " coords= " 161,8,309,86 " href= " http://www.pchome.com.tw " alt= " PChome " > 
< area shape= " rect " coords= " 311,8,460,86 " href= " http://www.yam.com.tw " alt= " 蕃薯藤 " > 
< /MAP >

上一頁| 回首頁