影像地圖(Image Map)…想必許多人都應該聽過這個HTML用法之一吧! Image Map 是用來再一個圖檔上用座標切割出一塊圖來當連結用的。覺得很新奇嗎? 往下繼續看吧!

1. 以下是一個 Image Map 的範例。
   

1. 首先, 我們要先決定你要切割的位置, 如下:
   
2. 現在我們開始加HTML碼。首先我們需要寫入可以啟動IMAGE MAP 的語法。

   <MAP NAME="MyMap"> </MAP>

3. 接下來我們要加入切割的語法。

   <AREA SHAPE="Rect" HREF="MyPage.html" COORDS="26,185 238,185">

   
   在以上的碼裡面, 我們可以看到 SHAPE="Rect"　這段。這段就是 你可以設定形狀的地方。Rect 是長方形, Circle 是圓形, Polygon　是多角形(至於 幾個角, 依座標數量而定)。 接著COORDS="" 就是設定做標的語法。
4. 現在我們把之前的語法都拼湊起來:

   <MAP NAME="MyMap"> <AREA SHAPE="polygon" HREF="01.htm" COORDS="26,185 238,185 238,216 55,216"> <AREA SHAPE="polygon" HREF="02.htm" COORDS="76,238 355,238 355,271 109,271"> <AREA SHAPE="polygon" HREF="03.htm" COORDS="131,294 395,294 395,330 171,330"> <AREA SHAPE="rect" HREF="tutwho.htm" COORDS="234,349 361,366"> <AREA SHAPE="circle" HREF="tutwho.htm" COORDS="272,133 41"> </MAP>

5. 最後, 我們要把以上的語法從圖片裡面乎叫出來。

   <IMG USEMAP="#MyMap" SRC="MyImage.jpg" BORDER="0">

6. 這樣就大功告成啦! 有問題請到討論區提出。

最後更新日期: 2/2/2002 2:52:32 PM