巧妙運(yùn)用Dreamweaver的熱點(diǎn)鏈接技術(shù)制作地圖連接

在瀏覽網(wǎng)頁(yè)時(shí)，經(jīng)常能看到一些圖片上的特殊超鏈接，即在一張圖片上有多個(gè)局部區(qū)域與不同的網(wǎng)頁(yè)鏈接，比如地圖鏈接。

效果說(shuō)明：地圖中標(biāo)示出了中國(guó)的各個(gè)省市和直轄市，當(dāng)在地圖上單擊某個(gè)特定區(qū)域時(shí)，就會(huì)跳轉(zhuǎn)到相應(yīng)地圖區(qū)的說(shuō)明頁(yè)面。

創(chuàng)作思想：本實(shí)例將利用 Dreamweaver 的圖像熱點(diǎn)功能完成地圖鏈接實(shí)例。

操作步驟

（ 1 ）新建一個(gè)HTML文件取名為 map.htm 文件，在頁(yè)面中插入一幅中國(guó)地圖，如圖 1 所示。

提示：本實(shí)例所用到的中國(guó)地圖china.jpg。

（ 2 ）繪制熱點(diǎn)區(qū)域。單擊頁(yè)面上的中國(guó)地圖，然后利用屬性欄中的【矩形熱點(diǎn)】工具在地圖上繪制熱點(diǎn)區(qū)域，如圖 2 所示。 

（ 3 ）當(dāng)繪制完矩形熱點(diǎn)區(qū)域后，圖像屬性面板將變成熱點(diǎn)屬性面板，如圖 3 所示。在鏈接欄處選擇熱點(diǎn)區(qū)域所要鏈接的目標(biāo)網(wǎng)頁(yè)，在【替代】框中填入相關(guān)的提示說(shuō)明，并使鏈接的網(wǎng)頁(yè)在新窗口中打開(kāi)。

提示：在這里將【目標(biāo)】設(shè)置為 _blank 代表在新 的瀏覽器窗口中打開(kāi)被鏈接的文檔，并保持當(dāng)前窗口可用?！灸繕?biāo)】框中其他各選項(xiàng)的含義是， _parent 代表在鏈接所在的父框架集中打開(kāi)鏈接文檔； _self 代表在當(dāng)前框架中打開(kāi)鏈接文檔，替換該框架中的內(nèi)容； _top 代表在當(dāng)前文檔的最外層框架集中打開(kāi)鏈接文檔，替換所有框架中的內(nèi)容。

（ 4 ）繪制其他熱點(diǎn)區(qū)域。使用屬性面板中的另外兩個(gè)熱點(diǎn)工具【橢圓形熱點(diǎn)】工具和【多邊形熱點(diǎn)】工具同樣可以在地圖上繪制熱點(diǎn)并設(shè)置相關(guān)的熱點(diǎn)屬性，其使用方法和【矩形熱點(diǎn)】工具相同。大家可利用這 3 個(gè)熱點(diǎn)工具在地圖上繼續(xù)繪制其他熱點(diǎn)區(qū)域并設(shè)置鏈接，最終效果如圖 4 所示。 

5 ）保存頁(yè)面文件并按 F12 鍵進(jìn)行預(yù)覽。至此，本實(shí)例操作完畢。

在這里我只給大家繪制了３個(gè)省的區(qū)域！目的教給大家如何做這種網(wǎng)頁(yè)，通過(guò)學(xué)習(xí)這個(gè)實(shí)例，是不是覺(jué)得很簡(jiǎn)單呢？當(dāng)然你要想把整個(gè)地圖都設(shè)置連接可是非常麻煩了??！主要是浪費(fèi)時(shí)間！這個(gè)教程就寫(xiě)到這了。

本實(shí)例的操作相對(duì)簡(jiǎn)單，但在制作過(guò)程中，必須細(xì)心的繪制各個(gè)區(qū)域；各個(gè)區(qū)域間最好留有一點(diǎn)空隙，以免在選擇時(shí)出現(xiàn)錯(cuò)誤

網(wǎng)頁(yè)標(biāo)題：巧妙運(yùn)用Dreamweaver的熱點(diǎn)鏈接技術(shù)制作地圖連接
本文來(lái)源：http://bm7419.com/news/165919.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、定制網(wǎng)站、建站公司、電子商務(wù)、靜態(tài)網(wǎng)站、網(wǎng)頁(yè)設(shè)計(jì)公司

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請(qǐng)盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng)，如需處理請(qǐng)聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來(lái)源： 創(chuàng)新互聯(lián)