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

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

一、準(zhǔn)備一張圖片

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

二、插入圖片

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

三、找到地圖工具

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

四、繪制熱點(diǎn)

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

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

五、給熱點(diǎn)添加鏈接

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

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

六、修改熱點(diǎn)

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

七、給多個圖片添加熱點(diǎn)

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

八、熱點(diǎn)的原理

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

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

總結(jié)

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