所在位置：
首页 >
营销资讯 >
网站运营 > wordpress网站使用热点图片（Image Hotspot) 功能制作图片地图
wordpress网站使用热点图片（Image Hotspot) 功能制作图片地图
时间：2023-07-23 03:39:02 | 来源：网站运营
时间：2023-07-23 03:39:02 来源：网站运营
wordpress网站使用热点图片（Image Hotspot) 功能制作图片地图：
先给大家看一下做出来的效果是这样的，鼠标悬浮在小图标上会显示国家的名字，点击名字会显示相对应的城市图片。
热点图片功能就是我们可以把图片加上一些点，然后客户点击的时候，就可以看到具体的解释或者弹出细节图。我们可以把热点图片功能用在好些地方，如产品细节的解释，在地图上添加office的地理位置，代理位置，市场覆盖等。
一、安装插件Image Hotspot by DevVN
Avada主题是不带热点功能，所以我们需要借助 Image Hotspot by DevVN 这个插件去实现。我们在插件市场搜索Image Hotspot by DevVN，出来的第一个结果就是我们要的插件，点击安装并激活即可。
安装成功之后，我们就可以在左侧看到Image Hotspot的菜单栏，我们点击进去就可以看到所有我们添加的Hotspot热点图片了。
二、添加Hotspot 热点图片
点击Add new即可添加新的热点图片，界面很简单。先命名，（比如我这里命名为maps）然后分别把按钮的图片和要添加热点的设备图片分别上传进去。如下图所示操作即可：
然后我们就可以给我们的设备添加热点了。我们点击Add Point即可添加出来一个热点，添加成功的热点会在左侧显示，然后把这个点移到设备上指定的位置即可。
这里添加热点小图片的图片最好上传17*17的，这里给大家推荐一个网站，上面的图标素材可以根据大小需求免费下载
这个是我下载的图标，大家也可以选择别的喜欢的图标。
到这一步，我们就完成了点的添加和标记功能了，接下来我们就需要给这个点添加内容。我们双击设备上标记好的点，就会弹出上传内容的界面。我们可以插入想要的细节图，再配上文字，你也可以插入视频，看你自己的需求。
这里我插入的是国家文字，然后给文字添加了一个图片的超链接，改了一下文字的颜色让它更加符合网站主题色风格。
设置完成后点击右上角的更新会，出来一个代码，然后复制代码。
最后将复制的代码，去到你新建的页面里面，用wordpress的原始编辑器即可，然后复制完成后发布页面，刷新去前台看一下效果成功即可。
最后放上官方插件的youtube教学视频，需要大家翻墙观看，看不了的可以给我评论或者私信，将视频下载下来私发给你。
最后在提一个问题，就是怎么更改悬浮的背景颜色，默认的都是黑色，怎么改大家谁操作出可以cue我一下，我来学习。
在线咨询
