本发明涉及一种在线计算图片热点植入位置的方法，属于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：用数据库中保存的热点区域的相对位置信息，动态生成热点区域代码。
优选地，所述第二步中的矩形框利用jqueryeasyui提供的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：用数据库中保存的热点区域的相对位置信息，动态生成热点区域代码。
所述第二步中的矩形框利用jqueryeasyui提供的draggable控件和resizable控件实现。
所述第三步中的矩形框在图片上的相对坐标，通过与图片的宽度和高度计算得出。
所述第三步中的矩形框在图片上的相对大小，通过与图片的宽度和高度计算得出。
实施例二：
本发明所述的一种在线计算图片热点植入位置的方法，属于web应用领域。用户在web页面，载入一张图片，利用一个可移动位置和可调整大小的矩形框，选中一个需要植入热点的位置，计算矩形框在图片上的相对坐标，保存热点位置和热点信息。在图片显示页面，利用已保存的热点位置和热点信息，系统动态生成页面代码，在不使用外部工具的前提下，用户也可以很方便的实现，提升了用户操作的便利性，也减少了系统的维护工作。
本发明所述的一种在线计算图片热点植入位置的方法，用户在web页面，载入一张图片，利用一个可移动位置和可调整大小的矩形框，选中一个需要植入热点的位置，计算矩形框在图片上的相对坐标和相对大小，保存热点位置和热点信息。在图片显示页面，利用已保存的热点位置和热点信息，动态生成页面代码。
所述的可移动位置和可调整大小的矩形框，利用jqueryeasyui控件提供的draggable控件和resizable控件实例一个矩形框。
所述的相对坐标，获取矩形框的坐标，通过与图片的宽度和高度计算得出的相对坐标。
所述的相对大小，获取矩形框的宽度与高度，通过与图片的宽度和高度计算得出的相对大小。
配置并保存热点位置及信息:在热点配置画面，载入图片，设置图片的宽度(w)和高度(h)，拖动一个矩形框到热点位置，调整其大小为热点区域的大小。添加热点信息，点击保存。保存时获取矩形框的起始坐标(x1,y1)，矩形框的宽度(w1)和高度(h1)，根据图片的宽度(w)和高度(h)，计算矩形框的相对坐标(x1/w,y1/h)，矩形框的相对宽度(w1/w)，相对高度(h1/h)，并保存到数据库。
动态生成热点位置及信息:设置页面中图片的显示大小宽度(w0)，高度(h0)，显示的长宽比一定要和设置图片热点区域的长宽比一致。用数据库中保存的热点区域的相对位置信息，动态生成热点区域代码。生成内容例如：
<imgusemap＝"#testmap"……
<mapname＝"testmap"id＝"testmap">
<areashape＝"rect"coords＝"w0*x1/w,h0*y1/h,w0*x1/w
以上所述仅为本发明的较佳实施例而己，并不以本发明为限制，凡在本发明的精神和原则之内所作的均等修改、等同替换和改进等，均应包含在本发明的专利涵盖范围内。