[发明专利]在线计算图片热点植入位置的方法

说明书

技术领域

本发明涉及一种在线计算图片热点植入位置的方法，属于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控件实现。

所述第三步中的矩形框在图片上的相对坐标，通过与图片的宽度和高度计算得出。

所述第三步中的矩形框在图片上的相对大小，通过与图片的宽度和高度计算得出。

实施例二：