本发明涉及一种在线计算图片热点植入位置的方法,属于WEB应用技术领域。
背景技术:
为丰富页面的显示内容或查看更详细的图片信息,WEB页面的图片常常会添加一些热点信息,由于图片有不确定性,图片中热点的位置、数量及相关信息也有不确定性,如何让WEB用户方便高效灵活的植入图片热点是WEB应用系统的一个问题。
针对图片热点信息植入有两种主要解决方法,第一种是利用Dreamweaver等外部工具,编辑热点信息。该方法必须安装外部工具,工具的使用需要培训,并且编辑好的信息需要开发人员配合才能应用于页面显示。第二种是利用CMS系统进行热点信息维护,该方法比较专业,不适合WEB用户直接使用。
针对上述问题,本发明提出了一种在线计算图片热点植入位置的方法方案。
技术实现要素:
针对现有技术存在的上述缺陷,本发明提出了一种新的在线计算图片热点植入位置的方法,实现用户在无需安装外部工具,无需具备专业的系统维护知识,即可实现图片的热点信息维护。
本发明是采用以下的技术方案实现的:一种在线计算图片热点植入位置的方法,包括如下步骤:
第一步:用户在WEB页面,载入一张图片,设置图片的宽度W和高度H;
第二步:利用一个可移动位置和可调整大小的矩形框,选中一个需要植入热点的位置;
第三步:计算矩形框在图片上的相对坐标和相对大小,保存热点位置和热点信息,包括如下小步:
S1:保存时获取矩形框的起始坐标(x1,y1),矩形框的宽度W1和高度H1;
S2:根据图片的宽度W和高度H,计算矩形框的相对坐标(x1/W,y1/H);
S3:将矩形框的相对宽度W1/W,相对高度H1/H,并保存到数据库;
第四步:在图片显示页面,利用已保存的热点位置和热点信息,动态生成页面代码,包括如下小步:
S4:设置页面中图片的显示大小宽度(W0),高度(H0),显示的长宽比一定要和设置图片热点区域的长宽比一致;
S5:用数据库中保存的热点区域的相对位置信息,动态生成热点区域代码。
优选地,所述第二步中的矩形框利用Jquery EasyUI提供的Draggable控件和Resizable控件实现。
优选地,所述第三步中的矩形框在图片上的相对坐标,通过与图片的宽度和高度计算得出。
优选地,所述第三步中的矩形框在图片上的相对大小,通过与图片的宽度和高度计算得出。
本发明的有益效果是:采用本发明所述的在线计算图片热点植入位置的方法,不用安装外部工具,不用掌握专业知识,就能植入图片热点;该发明能实现用户不依懒于开发人员,不用了解编码知识,就能简单方便的植入图片热点。
附图说明
图1是本发明的流程框图。
具体实施方式
为了使本发明目的、技术方案更加清楚明白,下面结合附图,对本发明作进一步详细说明。
实施例一:
如图1所示,本发明所述的在线计算图片热点植入位置的方法,包括如下步骤:
第一步:用户在WEB页面,载入一张图片,设置图片的宽度W和高度H;
第二步:利用一个可移动位置和可调整大小的矩形框,选中一个需要植入热点的位置;
第三步:计算矩形框在图片上的相对坐标和相对大小,保存热点位置和热点信息,包括如下小步:
S1:保存时获取矩形框的起始坐标(x1,y1),矩形框的宽度W1和高度H1;
S2:根据图片的宽度W和高度H,计算矩形框的相对坐标(x1/W,y1/H);
S3:将矩形框的相对宽度W1/W,相对高度H1/H,并保存到数据库;
第四步:在图片显示页面,利用已保存的热点位置和热点信息,动态生成页面代码,包括如下小步:
S4:设置页面中图片的显示大小宽度(W0),高度(H0),显示的长宽比一定要和设置图片热点区域的长宽比一致;
S5:用数据库中保存的热点区域的相对位置信息,动态生成热点区域代码。
所述第二步中的矩形框利用Jquery EasyUI提供的Draggable控件和Resizable控件实现。
所述第三步中的矩形框在图片上的相对坐标,通过与图片的宽度和高度计算得出。
所述第三步中的矩形框在图片上的相对大小,通过与图片的宽度和高度计算得出。
实施例二:
本发明所述的一种在线计算图片热点植入位置的方法,属于WEB应用领域。用户在WEB页面,载入一张图片,利用一个可移动位置和可调整大小的矩形框,选中一个需要植入热点的位置,计算矩形框在图片上的相对坐标,保存热点位置和热点信息。在图片显示页面,利用已保存的热点位置和热点信息,系统动态生成页面代码,在不使用外部工具的前提下,用户也可以很方便的实现,提升了用户操作的便利性,也减少了系统的维护工作。
本发明所述的一种在线计算图片热点植入位置的方法,用户在WEB页面,载入一张图片,利用一个可移动位置和可调整大小的矩形框,选中一个需要植入热点的位置,计算矩形框在图片上的相对坐标和相对大小,保存热点位置和热点信息。在图片显示页面,利用已保存的热点位置和热点信息,动态生成页面代码。
所述的可移动位置和可调整大小的矩形框,利用Jquery EasyUI控件提供的Draggable控件和Resizable控件实例一个矩形框。
所述的相对坐标,获取矩形框的坐标,通过与图片的宽度和高度计算得出的相对坐标。
所述的相对大小,获取矩形框的宽度与高度,通过与图片的宽度和高度计算得出的相对大小。
配置并保存热点位置及信息:在热点配置画面,载入图片,设置图片的宽度(W)和高度(H),拖动一个矩形框到热点位置,调整其大小为热点区域的大小。添加热点信息,点击保存。保存时获取矩形框的起始坐标(x1,y1),矩形框的宽度(W1)和高度(H1),根据图片的宽度(W)和高度(H),计算矩形框的相对坐标(x1/W,y1/H),矩形框的相对宽度(W1/W),相对高度(H1/H),并保存到数据库。
动态生成热点位置及信息:设置页面中图片的显示大小宽度(W0),高度(H0),显示的长宽比一定要和设置图片热点区域的长宽比一致。用数据库中保存的热点区域的相对位置信息,动态生成热点区域代码。生成内容例如:
<img usemap="#testmap"……
<map name="testmap"id="testmap">
<area shape="rect"coords="W0*x1/W,H0*y1/H,W0*x1/W
以上所述仅为本发明的较佳实施例而己,并不以本发明为限制,凡在本发明的精神和原则之内所作的均等修改、等同替换和改进等,均应包含在本发明的专利涵盖范围内。