注册登录

iPictrue：图片标注提示

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

iPictrue：图片标注提示

查看演示 下载源码

HTML

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

<link rel="stylesheet" type="text/css" href="https://zhishitu.com"
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/jquery.ipicture.js"></script>
知识兔

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

<div id="iPicture" data-interaction="hover">
  	<div class="ip_slide">
    	<img class="ip_tooltipImg" src="images/mypic.jpg">
    	<div class="ip_tooltip ip_img32" style="top: 330px; left: 418px;"
 data-tooltipbg="bgblack" data-round="roundBgW" data-animationtype="btt-slide">
      		<p><b>游艇</b><br/>链接到：<a href="https://zhishitu.com"
    	</div>
        ....多个标注重复div class="ip_tooltip ip_img32"...
     </div>
</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插件。

<script type="text/javascript">
$( "#iPicture" ).iPicture();
</script>
知识兔

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

PS：如果你想兼容老式浏览器的话，你可以参照iPicture的老版本：http://ipicture.justmybit.com/

计算机