在網(wǎng)頁設(shè)計(jì)中，圖像映射（Image Map）就是在一張圖片的不同區(qū)域建立鏈接，指向不同的URL。圖片上的區(qū)域也稱為“熱點(diǎn)（hotspots）”。當(dāng)單擊該熱點(diǎn)區(qū)域時(shí)，會(huì)觸發(fā)超鏈接，并跳轉(zhuǎn)到其他網(wǎng)頁或網(wǎng)頁的某個(gè)位置。圖像地圖是一種特殊的超鏈接形式，常用來在網(wǎng)頁設(shè)計(jì)時(shí)圖像中設(shè)置局部區(qū)域?qū)Ш健?/p>

【操作步驟】

第1步，插入圖像，然后選中圖像，打開【屬性】面板，并單擊該面板右下角的展開箭頭，顯示圖像地圖制作工具。使用【指針熱點(diǎn)工具】、【矩形熱點(diǎn)工具】、【橢圓熱點(diǎn)工具】和【多邊形熱點(diǎn)工具】可以調(diào)整和創(chuàng)建熱點(diǎn)區(qū)域。

 ?【地圖】文本框：輸入熱點(diǎn)區(qū)域名稱，便于引用。   

?【指針熱點(diǎn)工具】按鈕：調(diào)整和移動(dòng)熱點(diǎn)區(qū)域。   

?【橢圓熱點(diǎn)工具】按鈕：在選定圖像上拖動(dòng)鼠標(biāo)指針可以創(chuàng)建圓形熱區(qū)。   

?【矩形熱點(diǎn)工具】按鈕：在選定圖像上拖動(dòng)鼠標(biāo)指針可以創(chuàng)建矩形熱區(qū)。   

?【多邊形熱點(diǎn)工具】按鈕：在選定圖像上，單擊選擇一個(gè)多邊形，定義一個(gè)不規(guī)則形狀的熱區(qū)。單擊【指針熱點(diǎn)工具】按鈕可以結(jié)束多邊形熱區(qū)定義。

第2步，在【屬性】面板的【地圖】文本框中輸入熱點(diǎn)區(qū)域名稱。如果一個(gè)網(wǎng)頁的圖像中有多個(gè)熱點(diǎn)區(qū)域，必須為每個(gè)圖像熱點(diǎn)區(qū)域起一個(gè)唯一的名稱。

第3步，選擇一個(gè)工具，根據(jù)不同部位的形狀可以選擇不同的熱區(qū)工具，這里選擇【矩形熱點(diǎn)工具】，在選定的圖像上拖動(dòng)鼠標(biāo)指針，便可創(chuàng)建出圖像熱區(qū)。第4步，熱點(diǎn)區(qū)域創(chuàng)建完成后，選中熱區(qū)。   

?【鏈接】文本框：可輸入一個(gè)被鏈接的文件名或頁面，單擊【選擇文件】按鈕可選擇一個(gè)文件名或頁面。如果在【鏈接】文本框中輸入“#”，表示空鏈接。   

?【目標(biāo)】下拉列表框：要使被鏈接的文檔顯示在其他地方而不是在當(dāng)前窗口或框架，可在【目標(biāo)】下拉列表框中輸入窗口名或選擇一個(gè)框架名。   

?【替換】文本框：在該文本框中輸入所定義熱區(qū)的提示文字。在瀏覽器中當(dāng)鼠標(biāo)移到該熱點(diǎn)區(qū)域中將顯示提示文字?？稍O(shè)置不同部位的熱區(qū)顯示不同的文本。

第5步，用【矩形熱點(diǎn)工具】創(chuàng)建一個(gè)熱區(qū)，在【替換】文本框中輸入提示文字，并設(shè)置好鏈接和目標(biāo)窗口。

第6步，以相同的方法分別為各個(gè)部位創(chuàng)建熱區(qū)，并輸入不同的鏈接和提示文字，保存并預(yù)覽，這時(shí)單擊不同的熱區(qū)就會(huì)跳轉(zhuǎn)到對(duì)應(yīng)的頁面中。

管理鏈接

前面幾節(jié)介紹了網(wǎng)頁制作時(shí)單個(gè)鏈接的建立，而在一個(gè)網(wǎng)站里包含著形形色色的多個(gè)鏈接，如何安排和管理這些鏈接，關(guān)系到網(wǎng)站能否良好地運(yùn)作。

設(shè)計(jì)結(jié)構(gòu)清晰的鏈接

在網(wǎng)站中建立清晰的鏈接，既提供給瀏覽者一個(gè)良好的訪問環(huán)境，也方便網(wǎng)站管理人員的管理與維護(hù)。為此，要考慮到以下幾點(diǎn)。

1、設(shè)計(jì)一個(gè)清晰的網(wǎng)站結(jié)構(gòu)圖

首先要定位網(wǎng)站的主題，如個(gè)人網(wǎng)站、商業(yè)網(wǎng)站、知識(shí)類網(wǎng)站和娛樂類網(wǎng)站等，然后再來看這個(gè)網(wǎng)站要包含哪些內(nèi)容，需要多少網(wǎng)頁文件?？梢援嬕粋€(gè)草圖來理清思路。

2. 首頁上的鏈接要“有去有回”

不論網(wǎng)站的鏈接多么豐富，都要隨時(shí)給瀏覽者回到首頁的可能，使之不會(huì)在互聯(lián)網(wǎng)上迷失方向。

3. 給圖像鏈接做文字說明簡單的文字說明可以讓瀏覽者了解要鏈接的目標(biāo)。為圖像鏈接做說明有兩種方法。   

?把文字直接做在圖像上，成為圖像的一部分。   

?把文字直接寫在【屬性】面板的【替換】文本框中。

這樣當(dāng)鼠標(biāo)指針指向圖像時(shí)，就會(huì)出現(xiàn)文字提示。