iPictrue 图片标注提示

iPictrue是一款基于jQuery,能在图片上的任意位置标注提示信息的插件,使用iPictrue可以让图片内容更丰富,提高互动性,适用于一些需要注释图片信息的应用如产品结构图等,它还支持图片、链接等html内容。

HTML

首先在页面中加入jquery库以及iPicture插件,以及css样式文件。

  1. <link rel="stylesheet" type="text/css" href="css/iPicture.css"/> 
  2. <script type="text/javascript" src="js/jquery-1.8.3.min.js"></script> 
  3. <script type="text/javascript" src="js/jquery.ipicture.js"></script> 

然后在页面中按如下格式加入图片和提示信息。

  1. <div id="iPicture" data-interaction="hover"> 
  2.     <div class="ip_slide"> 
  3.         <img class="ip_tooltipImg" src="images/mypic.jpg"> 
  4.         <div class="ip_tooltip ip_img32" style="top: 330px; left: 418px;" 
  5.  data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="btt-slide"> 
  6.             <p><b>游艇</b><br/>链接到:<a href="http://www.daimajiayuan.com">www.daimajiayuan.com</a></p> 
  7.         </div> 
  8.         ....多个标注重复div class="ip_tooltip ip_img32"... 
  9.      </div> 
  10. </div> 

代码中,img.ip_tooltipImg是大图,也就是要标注提示的图片,div.ip_tooltip是提示信息,使用style的top和left来控制标注信息的相对位置,其他几个属性:data-tooltipbg是背景样式,data-round是标注点的样式,data-animationtype是提示信息的位置,如btt-slide意思是从下(bottom)到(top)动画显示提示信息,其他类推。在页面中我们使用了html5的data-*自定义特性,并且在iPicture.css文件中使用了css3的方法,所以要想看到demo的真正效果建议使用现代浏览器

jQuery

直接一句话调用iPicture插件。

  1. <script type="text/javascript"> 
  2. $( "#iPicture" ).iPicture(); 
  3. </script> 

就是这么简单,当鼠标滑动到图片上的闪烁的圆圈时,你会发现旁边会有提示框出现。当然你也可以修改css样式来符合你的应用外观,demo只是一个简单的展示,你也可以进行功能扩展,比如点击图片中的某个位置,可以输入标注信息,然后将位置和提示信息记录到数据库,就如同地图标注一样了。

转载请注明:代码家园 » iPictrue 图片标注提示

评论列表(网友评论仅供网友表达个人看法,并不表明本站同意其观点或证实其描述)