廣告聯播

2008年8月13日 星期三

[教學] 用 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>




2 則留言:

  1. 有機會可以玩玩 如果背景是css的background-image的話要怎麼滑鼠移到指定區域也可以link~。
    還蠻好玩的~~~
    因為大部份的blog要改banner只能透過css去改。

    回覆刪除
  2. 您好,想請問座標要到哪裡去看呢?

    回覆刪除