wordpress網(wǎng)站使用熱點圖片（Image Hotspot) 功能制作圖片地圖
時間：2023-07-23 03:39:02 | 來源：網(wǎng)站運營
時間：2023-07-23 03:39:02 來源：網(wǎng)站運營
wordpress網(wǎng)站使用熱點圖片（Image Hotspot) 功能制作圖片地圖：
先給大家看一下做出來的效果是這樣的，鼠標懸浮在小圖標上會顯示國家的名字，點擊名字會顯示相對應的城市圖片。
熱點圖片功能就是我們可以把圖片加上一些點，然后客戶點擊的時候，就可以看到具體的解釋或者彈出細節(jié)圖。我們可以把熱點圖片功能用在好些地方，如產(chǎn)品細節(jié)的解釋，在地圖上添加office的地理位置，代理位置，市場覆蓋等。
一、安裝插件Image Hotspot by DevVN
Avada主題是不帶熱點功能，所以我們需要借助 Image Hotspot by DevVN 這個插件去實現(xiàn)。我們在插件市場搜索Image Hotspot by DevVN，出來的第一個結(jié)果就是我們要的插件，點擊安裝并激活即可。
安裝成功之后，我們就可以在左側(cè)看到Image Hotspot的菜單欄，我們點擊進去就可以看到所有我們添加的Hotspot熱點圖片了。
二、添加Hotspot 熱點圖片
點擊Add new即可添加新的熱點圖片，界面很簡單。先命名，（比如我這里命名為maps）然后分別把按鈕的圖片和要添加熱點的設備圖片分別上傳進去。如下圖所示操作即可：
然后我們就可以給我們的設備添加熱點了。我們點擊Add Point即可添加出來一個熱點，添加成功的熱點會在左側(cè)顯示，然后把這個點移到設備上指定的位置即可。
這里添加熱點小圖片的圖片最好上傳17*17的，這里給大家推薦一個網(wǎng)站，上面的圖標素材可以根據(jù)大小需求免費下載
這個是我下載的圖標，大家也可以選擇別的喜歡的圖標。
到這一步，我們就完成了點的添加和標記功能了，接下來我們就需要給這個點添加內(nèi)容。我們雙擊設備上標記好的點，就會彈出上傳內(nèi)容的界面。我們可以插入想要的細節(jié)圖，再配上文字，你也可以插入視頻，看你自己的需求。
這里我插入的是國家文字，然后給文字添加了一個圖片的超鏈接，改了一下文字的顏色讓它更加符合網(wǎng)站主題色風格。
設置完成后點擊右上角的更新會，出來一個代碼，然后復制代碼。
最后將復制的代碼，去到你新建的頁面里面，用wordpress的原始編輯器即可，然后復制完成后發(fā)布頁面，刷新去前臺看一下效果成功即可。
最后放上官方插件的youtube教學視頻，需要大家翻墻觀看，看不了的可以給我評論或者私信，將視頻下載下來私發(fā)給你。
最后在提一個問題，就是怎么更改懸浮的背景顏色，默認的都是黑色，怎么改大家誰操作出可以cue我一下，我來學習。
在線咨詢