Server-Side Image Map

製作步驟:

選定所要的圖片,以及要連結的 html 檔案。
規劃圖片上可能出現的圖形 ( 可以有: 圓形,矩形,及多邊形。), 並用
任何適當的程式決定各圖形的座標範圍。
編輯相對應的座標設定檔案。
將作好的圖案及設定檔放入你的 html 檔案中,並測試它。

以下就以 NCSA HTTPD 上的設定為範例(用的是 imagemap 程式):

主要檔: http://www.math.ncu.edu.tw/~chenym/test2.html
圖片檔: http://www.math.ncu.edu.tw/~chenym/test.gif
設定檔: http://www.math.ncu.edu.tw/~chenym/test.ncsa

我們已經選定 test.gif 為要用的圖形檔, 這個圖案中有圓形,矩形,及一個多邊形。我們要連結的 html 檔分別是:

圓形 --> /~chenym/test/test2.html
矩形 --> /~chenym/test/test1.html
多邊形 --> /~chenym/test/test3.html
空白 --> /~chenym/test/test4.html
接下來我們就要來決定圖案中各圖形的座標。在此是在 X-Windows 下用 xv 這個程式來看的。另外還有一堆可用的編輯器,可以在 [1]中找到,並選取自己較為熟悉的平台適用的程式。
編輯一個設定檔,內容是把圖形的座標與欲連結的檔案等資訊放進去, Server 才知道如何處理。以下簡述 NCSA 的格式:
```
	method url coord1 coord2 ... coordn
```
- method
  method 包括以下的方法:
  1. default
    這是指圖案中為被設定的區域所指向的 URL。不須要座標。
  2. circle
    圓形,須要圓心及邊緣的一個點這兩個座標。
  3. poly
    多邊形,最多可以有一百邊,須要各頂點的座標。
  4. rect
    矩形,要左上角及右下角兩頂點的座標。
  5. point
    指定一個點的座標。
- url
  url 支援相對及絕對 URL (Relative & Absolute URLs)
- coordinate
  就是點的座標值啊! 用 x,y 的形式。
以下就是 test.ncsa 的內容:
```
default  /~chenym/test/test4.html
rect     /~chenym/test/test1.html 52,125 300,249    
circle   /~chenym/test/test2.html 313,290 393,290     
poly     /~chenym/test/test3.html 337,112 340,180 421,282 542,291 587,190 
504,126 360,154  
```
這個檔案是一行行依序處理的,所以若有重疊到的區域,會以較前面讀到的設定為準。
最後要利用我們作好的圖案及設定檔。我們要把它加在 test2.html 這檔案裡面,以下是範例:
```
<A HREF="http://www.math.ncu.edu.tw/cgi-bin/imagemap/~chenym/test.ncsa">
<IMG SRC="/~chenym/test.gif" ISMAP>
</A>
```

在此我們利用到 imagemap 這個程式來處理我們作好的圖案及設定檔。所以只要把上面這些東西加入指定的 html 檔,就可以按圖索冀了! 而在 <img> 這個標籤中的 "ISMAP" 屬性則是表示這是一個 Server-Side Imagemap。

關於 CERN 的 HTTPD 所用的圖案座標設定檔的設定,不同之處只是用來處理座標設定檔的程式叫做 htimage, 還有在設定檔中, url 及 coordinate 的擺放位置前後對調罷了! 範例可參考 [4]。

參考資料:

Client-Side ImageMap

前面介紹了 Server-Side Imagemap (以下簡稱 SS ) 的製作方法,接下來要介紹的是 Client-Side ImageMap(以下簡稱 CS )。CS 的構想是源於一些 SS 的缺點。這些缺點包括有:

SS 須要倚賴 HTTP 傳遞訊息。
SS 將決定那個座標連結那個檔案的動作交給 Server 執行, 如此可能增加使用者等待的時間,及 Server 的負荷。
使用者無法預先知道按下去後連結的 html 檔案為何。
圖案座標設定檔的格式依 Server 的不同而相異。

因此而有了 CS 的提案,希望能解除這些 SS 的缺點及限制。

CS 的製作步驟前兩步和 SS 的相同。而原本在 SS 中須要作的設定檔,在 CS 中就放在圖案所要出現的 html 檔中。在 <IMG> 這標籤中的屬性也多了一個 "USEMAP"。"USEMAP" 和 "ISMAP" 可以共存。若 <IMG> 中含有 USEMAP, 就表示這是一個 CS, 並且要指定圖案座標設定所在的位置。例如若寫:

	<IMG SRC="test.gif" USEMAP="test.html#testmap">

則這個圖案的座標設定就會在 test.html 這檔案中 <MAP NAME="TESTMAP"> 這 tag 所標示的那一個段落中了。此時就須要引進兩個新的標籤: <map> and <area>, 兩者的說明及簡介如下:

<MAP>這個標籤有包含一個屬性 -- "name" 用來指定 map 的名字。而這個標籤標示一個圖案的設定內容, 就是圖形,座標,及其所連結的 html 檔。那麼這些設定就是用 <AREA> 這個 tag 來給定。

<AREA> 包含有較多屬性: SHAPE, COORDS, HREF, NOHREF, 及 ALT。以下就用範例來說明:

這裡用的圖片及設定和 Server-Side Imagemap 中的範例一樣。圖片和設定是在同一個檔案中。

<IMG SRC="/~chenym/test.gif" USEMAP="#test">
<MAP NAME="test">
<AREA SHAPE="RECT" COORDS="52,125,300,249" HREF="/~chenym/test/test1.html">
<AREA SHAPE="CIRCLE" COORDS="313,290,80" HREF="/~chenym/test/test2.html">
<AREA SHAPE="POLYGON" COORDS="337,112,340,180,421,282,542,291,587,190,504,126,
360,154" HREF="/~chenym/test/test3.html">
</MAP>

參考資料:

Back