iPictrue:图片标注提示
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="data: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:图片标注提示
iPictrue:图片标注提示相关推荐
- 用yolo3训练自己的数据集(包含数据搜集,图片标注,图片批量命名以及如何修改代码)——口罩佩戴以及规范佩戴口罩检验
用yolo3训练自己的数据集--口罩佩戴及规范性佩戴检验 前言 1. 数据集处理 1.1 数据搜集(多途径) 1.2 自己制作数据集 2.图片标注 2.1 图片批量命名 2.2 使用labelimg进 ...
- 图片标注工具 LabelImg 使用教程
转自:http://blog.csdn.net/jesse_mx/article/details/53606897 作者:Jesse_Mx ------------------------------ ...
- CVAT安装及图片标注使用详细教程[含踩坑记录]
cvat是一个图像标注工具,记录一下安装和使用过程: 目录 一.CVAT安装 step1 安装docker step2 获取权限 step3 获取权限 step4 克隆cvat源代码 step5 构建 ...
- 图片标注工具LabelImg的简单安装
前言 最近要用到图片标注工具LabelImg来创建导师的数据集,方便进行 深度学习训练.这款工具是全图形界面,用Python和Qt写的,最牛的是其标注信息可以直接转化成为XML文件,与PASCAL V ...
- CV之LabelImg:图片标注工具之LabelImg(图像标注工具)的简介、安装、使用方法详细攻略
CV之LabelImg:图片标注工具之LabelImg(图像标注工具)的简介.安装.使用方法详细攻略 目录 LabelImg的简介 常见的图片标注工具 LabelImg trainingImageLa ...
- VOC数据集图片标注工具labelImg简介、安装、使用方法详细攻略(windows) PyQt4、PyQt5
参考文章1:labelImg:图片标注工具之labelImg的简介.安装.使用方法详细攻略 参考文章2:LabelImg labelImg的安装 用gitbash打开,运行git clone http ...
- pythontkinter图片_Python tkinter实现图片标注功能(完整代码)
.tkinter tkinter是Python下面向tk的图形界面接口库,可以方便地进行图形界面设计和交互操作编程.tkinter的优点是简单易用.与Python的结合度好.tkinter在Pytho ...
- 【问题记录】labelImg:一款实用图片标注工具的安装和使用
前言 labelImg是一个实用的图片标注软件,可以用于数据集的制作.标注等等,它的使用需要以下库的支持:PyQt5.PyQt5_tools.lxml.下面介绍labelImg的安装过程. 安装方法: ...
- 【MarkMan】图片标注测量
背景:可作为UI测量工具 1.MarkMan图片标注测量工具 1)下载安装AdobeAIRInstaller.exe 2)下载安装MarkMan.air 3)运行 4)拖入或复制粘贴或截图粘贴,任一图 ...
最新文章
- 最年轻和最年长新院士:一个是数学神童 一个曾是氮肥厂工人
- 以Lazada为例,看电商系统架构演进
- php微信支付分取消订单,微信支付PHP开发教程五关闭订单
- SQL注入漏洞解决方法
- Canvas设置样式无效导致圆变成椭圆的问题研究剖析
- 如何将内核静态库编译连接到驱动程序中去【转】
- 《C++语言基础》实践参考——我的向量类
- Wireshark软件使用教程
- macOS 10.14安装win10教程 bootcamp篇
- 10 个最佳 WordPress 幻灯片插件
- OSChina 周四乱弹 —— 不要生气!我不要生气!
- 《Linux命令行与shell脚本编程大全》 第二十五章 学习笔记
- H5页面手机端禁止缩放的正确方式
- PS案例提升课视频教程
- Nebula 来了,支付宝 App 跨平台动态化框架
- C语言编程实例—输出指定图形
- 基于python的简单名片系统
- 记一次美版苹果手机购买经历
- 学生管理系统(C语言小项目)
- 操作系统μC/OS-Ⅱ读书笔记(2)
热门文章
- 信息学奥赛C++语言:装饰水果
- 31 SD配置-主数据-信用管理-定义自动信贷控制
- python3 random模块_Python3 中 random模块
- C语言 strcspn函数实现
- Pycharm不能用了
- 深度学习中图像预处理均值
- 使用PyCharm连接云主机教程
- oracle9i解密rewrap,oracle 9i 的加密解密用法之dbms_obfuscation_toolkit(一)
- Property or method “id“ is not defined on the instance but referenced during render.Make sure ......
- python操作excel命令_python操作Excel读写(使用xlrd和xlrt)[转帖]