在網(wǎng)頁設(shè)計中，為了讓用戶更好的體驗頁面內(nèi)容，我們需要將一些信息通過圖片的方式展現(xiàn)出來。而在這些圖片中，有些部分需要加上鏈接，讓用戶可以點擊跳轉(zhuǎn)到相應(yīng)的頁面。那么如何在DW工具中給圖片添加熱點呢？下面就

在網(wǎng)頁設(shè)計中，為了讓用戶更好的體驗頁面內(nèi)容，我們需要將一些信息通過圖片的方式展現(xiàn)出來。而在這些圖片中，有些部分需要加上鏈接，讓用戶可以點擊跳轉(zhuǎn)到相應(yīng)的頁面。那么如何在DW工具中給圖片添加熱點呢？下面就來介紹一下。

一、準備一張圖片

首先，我們需要準備一張圖片，并且確定要給哪些區(qū)域添加熱點。這個圖片可以是公司產(chǎn)品、活動場景等。

二、插入圖片

在DW工具中新建一個網(wǎng)頁，將之前準備好的圖片插入到頁面中。

三、找到地圖工具

單擊鼠標左鍵點擊圖片，這時候軟件下方的屬性面板就會變成和圖片相關(guān)的屬性，注意看左下角部分，可以看到熱點地圖工具。如果沒有顯示該工具，可以點擊屬性面板右側(cè)的三角符號打開。

四、繪制熱點

在屬性面板中，可以看到方塊、圓形、多邊形三個小圖標，它們就是我們要用的“圖片熱點”工具，不同的熱點工具可以繪制出不同形狀的熱點區(qū)域。

首先點擊方塊按鈕，在你想加鏈接的地方畫一個方塊。添加熱點后的圖片區(qū)域會出現(xiàn)一個淺藍色蒙版，意味著該區(qū)域已經(jīng)添加了熱點。依次添加其他區(qū)域的熱點。

五、給熱點添加鏈接

熱點區(qū)域畫好后，下面的屬性面板就會變成該熱點區(qū)域的屬性。在鏈接欄中輸入要跳轉(zhuǎn)的鏈接地址，同時在目標欄中選擇鏈接打開方式。一般使用“_blank”，指超鏈接將在新窗口打開。替換項是當鼠標懸浮在該區(qū)域時提示的文字。

可以采用畫一個區(qū)域，添加對應(yīng)的連接，也可以依次把所有的區(qū)域熱點畫完，然后點擊熱點區(qū)域，依次添加對應(yīng)的連接。初學者建議一個一個的添加。

六、修改熱點

如果需要修改熱點區(qū)域，或者需要進行微調(diào)，可以點擊熱點區(qū)域，熱點區(qū)域四周會出現(xiàn)淺藍色的點。光標放在淺藍色的點，點擊鼠標左鍵，即可調(diào)整熱點區(qū)域的大小。

七、給多個圖片添加熱點

如果一個頁面中有多個圖片需要添加熱點，那么需要給每一張圖片對應(yīng)的熱點設(shè)置不同的熱點名稱。可以使用map1、map2、map3等命名，也可以使用不同圖片的內(nèi)容對熱點進行命名，如top_map、foot_map、act_map等。總之，不同圖片的熱點名稱不同即可。

八、熱點的原理

圖片通過usemap"Map"屬性將名稱為“Map”的熱點區(qū)域及連接映射到圖片上。熱點添加完畢后，查看頁面源代碼，你會發(fā)現(xiàn)在代碼最底下多出幾行內(nèi)容，這些就是熱點生成的。

一般來說，圖片的usermap屬性對應(yīng)的是map熱點的name的屬性值。所以如果頁面中如果有多個圖片添加熱點，那么每一個圖片的usemap值跟對應(yīng)的熱點地圖的name值一定要一樣，且不同的熱點區(qū)域name值不可以相同，如果相同，那么圖片上的熱點區(qū)域?qū)韵嗤Q的第一個熱點區(qū)域為準。

總結(jié)

在DW工具中添加圖片熱點，可以讓網(wǎng)頁中的圖片實現(xiàn)交互功能，提高用戶體驗度。通過以上步驟，你可以很快地完成圖片熱點的添加，并實現(xiàn)鏈接跳轉(zhuǎn)等功能。