现在位置首页 / 前端开发 /正文

jQuery交互式地图插件 - ImageMapster

作者: IT小兵 | 2013年9月8日| 热度:℃ | 评论: |参与:

 今天这篇文章要介绍的是一个相当给力的jQuery图片地图插件ImageMapster,可用于创建可交互式的动态地图效果。

jQuery交互式地图插件 - ImageMapster

  ImageMapster是一个能让传统的在线地图更加灵活生动的jQuery插件,使用它你可以选择地图中的任何区域并且高亮显示,你能以多种方式操作地图。
  它提供了多个强悍的内置方法,比如改变选中区域的边框颜色,添加淡入淡出效果等。除此之外,它的特点在于用户交互性很强,可以在地图中添加tooltip提示与用户进行交互。选择地图中区域时也可以对其进行分组,也可自动设置地图显示的大小。

如何使用

  此插件的使用方法也比较简单,先引入jQuery库和ImageMapster插件

<script src="jquery.js"></script>
< script src="jquery.imagemapster.js"></script>

  添加图片并设置热点

<img src="chinamap.jpg" border="0" usemap="#chinamapMap" id="chinamap" />
< map name="chinamapMap" id="chinamapMap">
<area shape="poly" name="site518" coords="386,477,393,474,400,474" href="#" />
< /map>

  最后初始化,以下是最简单的设置

$('img').mapster(
{
stroke: true,
isSelectable: true,
singleSelect: true,
mapKey: 'name',
listKey: 'name'
}
);

下载 演示

更多信息请访问项目主页:ImageMapster


点击阅读本文所属分类的更多文章: 前端开发 。和高手一起交流:346717337
友荐云推荐

未注明转发、原文均为本站原创。分享本文请注明 原文链接

给您更多信息和帮助

在这里您可以找到更多:

技术交流群:346717337 Jquery插件交流

投稿:suchso@vip.qq.com

承接:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/业务咨询

抢天猫双11红包
推荐使用阿里云服务器
echarts教程系列
本月最热文章

微信扫一扫,徜徉悠嘻网,您的休闲乐园

微信公众号:快乐每一天

随机文章
标签

技术交流群:346717337

投稿:suchso@vip.qq.com

专业专注:企业网站门户/微网站/微商城/CMS系统/微信公众号运营/付费问题咨询