4.4 定義圖像熱點

圖像熱點也稱為圖像地圖，即指定圖像內部某個區域為熱點，當單擊該熱點區域時，會觸發超鏈接，并跳轉到其他網頁或網頁的某個位置。圖像地圖是一種特殊的超鏈接形式，常用來在圖像中設置局部區域導航。

當在一幅圖上定義多個熱點區域，以實現單擊不同的熱區鏈接到不同頁面時，就可以使用圖像地圖。

【操作步驟】

第1步，啟動Dreamweaver CC，新建文檔，保存為index.html。

第2步，在編輯窗口中插入圖像，然后選中圖像，打開【屬性】面板，并單擊【屬性】面板右下角的展開箭頭，顯示圖像地圖制作工具，如圖4.23所示。

第3步，在【屬性】面板的【地圖】文本框中輸入熱點區域名稱。如果一個網頁的圖像中有多個熱點區域，必須為每個圖像熱點區域起一個唯一的名稱。

第4步，選擇一個工具，根據不同部位的形狀可以選擇不同的熱區工具，這里單擊【矩形熱點工具】按鈕，在選定的圖像上拖動鼠標指針，便可創建出圖像熱區。

第5步，熱點區域創建完成后，選中熱區，可以在【屬性】面板中設置熱點屬性。

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

（2）【目標】下拉列表框：要使被鏈接的文檔顯示在其他地方而不是在當前窗口或框架，可在【目標】下拉列表框中輸入窗口名或從中選擇一個框架名。

（3）【替換】文本框：在該文本框中輸入所定義熱區的提示文字。在瀏覽器中當鼠標移到該熱點區域中將顯示提示文字。可設置不同部位的熱區顯示不同的文本。

第6步，用【矩形熱點工具】創建一個熱區，在【替換】文本框中輸入提示文字，并設置好鏈接和目標窗口，如圖4.24所示。

第7步，以相同的方法分別為各個部位創建熱區，并輸入不同的鏈接和提示文字。

第8步，切換到【代碼】視圖，可以看到自動生成的HTML代碼：

其中，<map>標記表示圖像地圖，name屬性作為<img>標記中usermap屬性要引用的對象。然后用<area>標記確定熱點區域，shape屬性設置形狀類型，coords屬性設置熱點區域各個頂點坐標，href屬性表示鏈接地址，target屬性表示目標，alt屬性表示替代提示文字。

第9步，保存并預覽，這時單擊不同的熱區就會跳轉到對應的頁面中。

【拓展】

對于圖像地圖創建的熱區，用戶可以很容易地進行修改，如移動熱區、調整熱區大小、在層之間移動熱區，還可以將熱區從一個頁面復制到另一個頁面等。

使用【指針熱點工具】可以方便地選擇一個熱區。如果選擇多個熱區，只需要按住Shift鍵，單擊要選擇的其他熱區，就可以實現選擇多個熱區的目的。

使用【指針熱點工具】選擇要移動的熱區，拖動鼠標至合適位置即可移動熱區?；蛘呤褂面I盤操作，按下1次鍵盤上的箭頭鍵，熱區將向選定的方向移動1px，如果按下Shift+箭頭鍵，熱區將向選定的方向移動10px。

首先用【指針熱點工具】選擇要調整大小的熱區，然后拖動【熱點選擇器手柄】到合適的位置，即可改變熱區的大小或形狀。