iPictrue是一款基于jQuery,能在图片上的任意位置标注提示信息的插件,使用iPictrue可以让图片内容更丰富,提高互动性,适用于一些需要注释图片信息的应用如产品结构图等,它还支持图片、链接等html内容。
HTML
首先在页面中加入jquery库以及iPicture插件,以及css样式文件。
<link rel="stylesheet" type="text/css" href="css/iPicture.css"/> <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="http://www.helloweba.com">Helloweba.com</a></p> </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/
来源于helloweba.com > iPictrue:图片标注提示
相关推荐
工程制图课件:尺寸标注.ppt
jQuery制作图片标注提示信息插件。 演示地址:http://www.xwcms.net/js/tsk-fdc-dcc/88743.html
七步法洗手数据集:内含标注数据以及视频数据
命令:bv标注线段长度1.lsp
效率更高:智能标注可以自动化地进行标注,能够快速地生成标注结果,减少了人工标注所需的时间和精力,提高了标注效率。 精度更高:智能标注采用了先进的人工智能技术,能够对图像进行深度学习和处理,能够生成更加...
jQuery图片标注提示插件是一款鼠标响应式图片描述提示标注特效。
本项目使用Qt开发了一款图形化界面的图像数据标注工具,用于人工智能领域的数据准备,专门供用户对2D和3D图像两种方式进行标注: 检测标注:标记图像中覆盖物体的最小可能矩形(立方体)框,并为框添加标签。 分割...
数据集格式:Pascal VOC格式+YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) ...其他说明:图片爬取百度网页,手工labelImg标注,已核实标注准确性,可放心选购
数据集格式:Pascal VOC格式+YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):210 标注数量(xml文件个数):210 标注数量(txt文件个数):210 ...
三轮车数据集559张VOC+YOLO格式(手工标注) 数据集格式:Pascal VOC格式+YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):559 标注数量(xml...
数据收集和标注:收集包含命名实体的文本数据,并为每个实体标注相应的标签(实体类型)。 特征提取:从文本数据中提取有用的特征,如词性、词形、上下文等。这些特征将作为输入提供给模型。 模型训练:使用标注好的...
钢丝绳破损缺陷检测数据集1300张xml和txt标注文件.7z 数据集格式:Pascal VOC格式+YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):1318 ...
数据集格式:Pascal VOC格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):543 标注数量(xml文件个数):543 标注数量(txt文件个数):543 标注类别...
数据集格式:Pascal VOC格式+YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):2500 标注数量(xml文件个数):2500 标注数量(txt文件个数):...
数据集格式:Pascal VOC格式+YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):2500 标注数量(xml文件个数):2500 标注数量(txt文件个数):...
数据集格式:Pascal VOC格式+YOLO格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):3951 标注数量(xml文件个数):3951 标注数量(txt文件个数):...
数据集格式:Pascal VOC格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):438 标注数量(xml文件个数):438 标注数量(txt文件个数):438 标注类别...
数据集格式:Pascal VOC格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):296 标注数量(xml文件个数):296 标注数量(txt文件个数):296 标注类别...
数据集格式:Pascal VOC格式(不包含分割路径的txt文件,仅仅包含jpg图片以及对应的VOC格式xml文件和yolo格式txt文件) 图片数量(jpg文件个数):361 标注数量(xml文件个数):361 标注数量(txt文件个数):361 标注类别...