影像地圖

上次更新時間 2023年9月25日

了解如何在 Dreamweaver 中使用影像地圖,為您的網站建立互動式作用區。

影像地圖指的是已分成數個稱為作用區之區域的影像,當使用者按一下作用區時,就會發生動作 (例如,開啟新檔案)。

用戶端影像地圖會在 HTML 文件中儲存超文字連結資訊,不像伺服器端影像地圖是在個別的地圖檔案中儲存。 當網頁瀏覽者按一下影像中的作用區時,就會將相關的 URL 直接傳送給伺服器。 這讓用戶端影像的地圖比伺服器端影像的地圖還快,因為伺服器不需要轉譯瀏覽者所按的位置。 

Dreamweaver 不會變更現有文件中對伺服器端影像地圖的參考,您可以在同一個文件中使用用戶端影像地圖和伺服器端影像地圖。 但是,可同時支援兩種影像地圖類型的瀏覽器會優先處理用戶端影像地圖。 若要在文件中包含伺服器端影像地圖,您必須撰寫適當的 HTML 程式碼。

備註

若要在 Dreamweaver 中使用作用區,您必須處於設計檢視中。 

插入用戶端影像地圖

當您插入用戶端影像地圖時,就會建立作用區,然後定義使用者按一下作用區時會開啟的連結。

備註

您可以建立多個作用區,但是它們仍屬於同一個影像地圖。

在「文件」視窗中,選取影像。
在「屬性」檢查中,按一下右下角的展開器箭頭,查看所有屬性。

在「地圖」欄位中,輸入影像地圖的唯一名稱。 如果您正在同一文件中使用多個影像地圖,請確定每個地圖都有唯一的名稱。

若要定義影像地圖區,請執行下列其中一項作業:
  • 選取圓形工具 並拖曳指標滑過影像,建立圓形作用區。

  • 選取矩形工具 並拖曳指標滑過影像,建立矩形作用區。

  • 選取多邊形工具 並按一下每一個端點,定義不規則形狀的作用區。 按一下箭頭工具關閉形狀。

    在您建立作用區之後,就會出現作用區「屬性」檢查。

在「連結」欄位中,按一下資料夾圖示,以瀏覽並選取您希望在使用者按一下作用區時開啟的檔案,或是輸入路徑。

在「目標」下拉式清單中,請選取要在其中開啟檔案的視窗,或輸入其名稱。

您在目前文件中命名的所有頁框名稱,都會在彈出式清單中出現。 如果指定了不存在的頁框,連結頁面會在含有您所指定名稱的新視窗中載入。 您也可以從下列保留的目標名稱中選取:

  • _blank 會在新的、未命名的瀏覽器視窗中載入連結的檔案。
  • _parent 會在上一層頁框組或包含連結的頁框之視窗中載入連結的檔案。 如果包含連結的頁框不是巢狀的,則會在完整的瀏覽器視窗中載入連結的檔案。
  • _self 會在與連結所在的同一個頁框或視窗中,載入連結的檔案。 這個目標是預設值,因此您通常不需要指定它。
  • _top 會在完整的瀏覽器視窗中載入連結的檔案,然後移除所有頁框。
  • _new 會在新的瀏覽器視窗中載入連結的檔案。

備註

除非選取的作用區包含連結,否則目標選項無法使用。  

在「替代」方塊中,鍵入要顯示在純文字瀏覽器或手動下載影像之瀏覽器中的替代文字。 有些瀏覽器會在使用者移動指標滑過作用區時,將這個文字顯示為工具提示。
重複步驟 4 至 7 便能在影像地圖中定義其他作用區。
當您完成影像對應時,請在文件的空白區中按一下以變更「屬性」檢查。

修改影像地圖作用區

您可以輕易地編輯在影像地圖中建立的作用區。 您可以移動作用區、調整作用區大小,或在絕對定位元素 (AP 元素) 中前後移動作用區。

您也可以將含作用區的影像在文件之間複製,或複製影像中的一或多個作用區,再貼到另一個影像中,與影像相關的作用區也會被複製到新文件中。

選取影像地圖中的多個作用區

使用指標作用區工具選取作用區。
請執行下列其中一項作業:
  • Shift+按一下您要選取的其他作用區。

  • 按 Control+A 鍵 (Windows) 或 Command+A 鍵 (Macintosh) 來選取所有作用區。

移動作用區

使用指標作用區工具來選取作用區。
執行下列其中一項作業:
  • 將作用區拖曳到新區域。

  • 使用 Control+方向鍵,將作用區往選取的方向移動 10 個像素。

  • 使用方向鍵將作用區往選取的方向移動 1 個像素。

調整作用區大小

使用指標作用區工具 選取作用區。
拖曳作用區選取器控制點,變更作用區的大小或形狀。