[教學] 用 HTML 語法讓圖片上也可以作連結

From: Polin Wei


　　上面的圖是一般的相片, 對於圖中的文字 "我與小崴崴的工作日記", "我與小崴崴的生活日記", "我與小崴崴的電影日記" 是無法作網頁連結的，但若要像下圖，當滑鼠移到這三串文字時，也能連結到不同網站，那該如何作呢？



　　圖片大小以600x320 px 為例，只要加入下面 HTML 的語法即可：

<img src="htmlDemo.jpg" usemap="#htmlDemo" border="0" /></img>
<map name="htmlDemo">
<area shape="RECT" target="_blank" coords="395,173,574,205" href="http://polinwei.blogspot.com/">
<area shape="RECT" target="_blank" coords="395,210,574,242" href="http://tw.myblog.yahoo.com/polinwei">
<area shape="RECT" target="_blank" coords="395,263,574,290" href="http://polinwei.spaces.live.com/">
</map>

語法說明：

<img src="htmlDemo.jpg"  ==> 指定圖片
 usemap="#htmlDemo"  ==> 給圖片一個 ID:  #htmlDemo 這個名字可以自己定義
border="0" /></img>
<map name="htmlDemo"> ==> 要使用上面設定的 ID
<area shape="RECT" target="_blank" coords="395,173,574,205"  ==>( 左上X軸作標, 左上Y軸作標, 右下X軸作標, 右下Y軸作標 )
href="http://polinwei.blogspot.com/"> ==> 要前往的網站或網頁
<area shape="RECT" target="_blank" coords="395,210,574,242" href="http://tw.myblog.yahoo.com/polinwei">
<area shape="RECT" target="_blank" coords="395,263,574,290" href="http://polinwei.spaces.live.com/">
</map>