|
A.首先您必須準備一張圖檔，可選用 *.gif、*.jpg或 *.png (本例使用 pic.gif)。
|
B.同時也須準備一個 *.HTM (*.HTML) 檔 (本例使用 map.htm)，並且加入圖片基本語法。
|
<HTML> <HEAD> <TITLE>【電子報】網頁製作系列報導【編輯工具解說】</TITLE> </HEAD> <BODY> <Center> <img src="pic.gif"></img> </Center> </BODY> </HTML> |
C.然後打開 map32.exe 編輯器，它自己會跳出或點選 File
Open/Create Map。D.Create Type 選擇 NCSA (客戶端影像)。
|
E.選擇上面 Map or HTML File 欄位並按下右邊的 Browser 按鈕，選取您之前作好的 HTML 檔，再按開起舊檔。
|
F.如果您已按上述 A.B 完成作業，它會出現一個含有圖檔名稱的 Select Inline Image 視窗。
|
G.點選 pic.gif 按上圖 OK 後，則下面的 Image Filename 欄位，就會自動產生您選定的圖檔名稱。
|
H.再按 OK 後，此時圖片會被叫進來；您就可以開始做影像地圖的編輯了。
|
I.如果您未按上述 A 或 B 完成作業，它會出現要您選擇一個 *.HTM(L) 或 *.GIF (JPG) 的對話英文說明。
 
|
編輯選項 (圖示) 說明：
|
矩形區域選取
圓形區域選取，以圓心開始
多邊形區域選取
測試區域所連結到的URL
移動及改變選取區域的大小
增加不規則選取區域
減少不規則選取區域|
開始選項編輯： 當您在那張地圖範圍選取後 (本例採用矩形區域選取)，按滑鼠右鍵，會出現另一要您填入該範圍所欲 link 的 URL (URL for clicks on this object)、圖片代替文字 (Altemate text)、視窗開啟方式 (Target...)；如下圖：
Save Map 或 Save As to map.htm。Save As Fomat 請選擇 Client Side Map。
|
|
語法使用說明： 1.本例地圖設定後原始碼 <map name="pic"> <area shape="rect" alt="Thise is a rectangle Mape" coords="89,47,223,84" href="rect.htm" target="_blank"> <area shape="circle" alt="Thise is a Circle Mape" coords="155,137,40" href="circle.htm" target="_top"> <area shape="polygon" alt="Thise is a Polygon Mape" coords="119,204,119,275,193,275,117,202,117,202,122,208,122,208,121,205,121,205" href="poly.htm" target="_new"> <area shape="default" nohref> </map> 說明 ： map 宣告此為影像地圖 (Client Side Imagemap)、 name="pic" 地圖定義名稱，是給 map 採用。 設定後原始碼，您可參考 map.htm 對映設定檔。 2.對映 URL 設定說明： area (區域)、shape (外形)、coords (座標) area shape="rect" coords="89,47,223,84" href="rect.htm" 表示矩形的四個邊界點左上 x,左上 y,右下 x,右下 y"。 area shape="circle" coords="155,137,40" href="circle.htm" 表示圓形的圓心 x,圓心 y,半徑"。 area shape="polygon" coords="119,204,119,275,193,275,117,202,117,202,122,208,122,208,121,205,121,205" 表示多邊形的各轉折點 "x1,y1,x2,y2...."。 alt="Thise is a rectangle Mape" 圖片代替文字。 href="rect.htm" 該範圍所欲link的URL。 target="_blank" 視窗開啟方式，可重複開新視窗 (_blank)、跳出框架開新視窗 (_top)、單一開新視窗 (_new)。 area shape="default" nohref (無 Link 處)。 /map 影像地圖結束標籤。 |