上面的圖是一般的相片, 對於圖中的文字 "我與小崴崴的工作日記", "我與小崴崴的生活日記", "我與小崴崴的電影日記" 是無法作網頁連結的,但若要像下圖,當滑鼠移到這三串文字時,也能連結到不同網站,那該如何作呢?
圖片大小以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>
有機會可以玩玩 如果背景是css的background-image的話要怎麼滑鼠移到指定區域也可以link~。
回覆刪除還蠻好玩的~~~
因為大部份的blog要改banner只能透過css去改。
您好,想請問座標要到哪裡去看呢?
回覆刪除