無障礙網路空間服務網無障礙網路空間服務網

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

不良設計:

在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>
          
網頁內容結束分隔線