地图热点区域高亮显示解决方案

地图或图片热点区域高亮显示是一项很常见的网站应用,例如:当鼠标滑过电子地图的某个地区时,该地区高亮显示以及在目前社交网站中很受欢迎的“图片圈人”等功能。除了通过Flash实现这一功能外,今天给大家提供一个基于jQuery和ImageMapster插件实现热点区域高亮显示的解决方案。

首先要感谢来自美国华盛顿的软件开发者James Treworgy无私的奉献了ImageMapster,ImageMapster是一个jQuery插件,让每个开发者可以在不使用Flash的情况下激活网页中的图片,由于它是基于纯Javascript开发的,所以几乎目前所有主流的浏览器都可以正常访问,也包括iPhone、iPad和Android等移动平台。

ImageMapster目前主要提供如下功能:

  • 高亮显示选择区域,当鼠标悬停时高亮显示当期图片热点区域,可以定义高亮区域的颜色、透明度和边框等。
  • 通过备用图像替换当前高亮热点区域。
  • 显示浮动工具栏:用户可自定义每个热点区域是否显示浮动工具栏以及工具栏显示的内容。

要下载或了解ImageMapster更多功能大家可以随时访问其主页:http://www.outsharked.com/imagemapster/

使用jQuery和ImageMapster插件很轻松实现如下图所示效果,我们只需要先设定地图中的热点区域,设置接口参数即可激活地图。

image

演示地址:http://www.sellsoft.cn/app/ImageMapster/

如果你希望获得更多帮助或有什么更好的建议,欢迎随时与我联系

评论已关闭。