CN104679906B - 利用图片生成链接的方法及系统 - Google Patents

Abstract

本发明公开了一种利用图片生成链接的方法，该方法包括：服务器获取所述图片，并为所述图片设定链接区域；根据所述链接区域的形状信息及所述链接区域相对于所述图片的坐标生成代码，创建图片覆盖层；当访问所述图片的不同区域时，跳转至所述不同区域上的图片覆盖层所对应的信息地址的链接。利用本发明的方法，可以实现在一幅图中展示多个广告，并能使广告和展示相分离，节省了服务器带宽，减少了广告链接的维护成本。

Description

利用图片生成链接的方法及系统

技术领域

本发明涉及一种在互联网上发布信息的方式，特别涉及利用图片生成信息链接的方法及系统。

背景技术

传统的网络页面的链接技术中，基本是一幅图片对应一个链接，一个关键字对应一个超链接。这两种方式都存在各自的缺点。传统的关键字链接，表现形式单一，如果需要提高观赏性，需要通过背景图的方式进行包装。然而采用这种方式，背景图即使是做很小的变动，就要修改相应的代码，非常麻烦。而一幅图片对应一个链接的方式，一幅图一个信息页，成本相对较高。因为用户可能只对图片的某个部分感兴趣，所以希望能够提供多个入口给用户，把相应的流量导入到不同的服务站点。而如果使用一幅图一个信息页的方法，则可能需要裁剪多幅图来达到上述效果。但是，裁剪多幅图时，如果访问量大，例如进行多次访问，则耗费的流量多，维护多张图花费的人力也多。

发明内容

本发明的目的在于提供一种利用图片生成链接的方法及系统，以解决上述技术问题的至少一个。

根据本发明的一个方面，提供了一种利用图片生成链接的方法，包括：服务器获取图片，并为图片设定链接区域；根据链接区域的形状信息及链接区域相对于图片的坐标生成代码，创建图片覆盖层；当访问图片的不同区域时，跳转至不同区域上的图片覆盖层所对应的信息地址的链接。

通过在图片上创建图片覆盖层的方法，实现了在一幅图中展示多个信息链接，并能使信息显示层和图片展示层相分离，节省了服务器带宽。

在一些实施方式中，图片覆盖层可以是信息地址链接。其中，生成代码，创建图片覆盖层包括：根据形状信息及坐标生成链接插入代码，并在图片所在的页面插入生成的链接插入代码，从而在图片的不同区域形成信息地址的链接。由此，可以实现在一幅图片上放置多个信息地址链接。

在一些实施方式中，图片覆盖层还可以是透明覆盖层。其中生成代码，创建图片覆盖层包括：生成用于生成透明覆盖层的代码和在透明覆盖层上定位链接区域的定位代码，在图片所在的页面嵌入生成的代码，从而在图片形成包含不同链接区域的透明覆盖层。由此，可以把信息显示层与图片展示层进行完全的分离，即使图片展示层没有加载完成，亦可以实现跳转，增加了信息显示的转化率，并可以随意更换图片，只要链接信息不发生变化，就不用修改代码，节省流量，减少维护成本。而且，鼠标进入透明覆盖层时，由于在覆盖层已绑定了鼠标移动事件，就可以利用鼠标事件计算用户的鼠标滑动轨迹，并把这些信息发送到大数据收集平台，从而能够更多的了解用户行为，增加信息定位的精准度。

在一些实施方式中，其中对于宽高固定的预定展示位，生成透明覆盖层的步骤包括设定图片的宽高为展示位的宽高，计算图片相对于其所在页面的相对坐标，然后根据相对坐标与展示位的宽高生成透明覆盖层；在透明覆盖层上定位链接区域包括在透明覆盖层中根据形状信息及链接区域相对于图片的坐标对图片链接区域进行定位，把生成的透明覆盖层覆盖到图片所在页面的相对位置；

对于宽高不固定的预定展示位，由用户自定义容器的宽高，此时，生成透明覆盖层的步骤包括计算容器的宽高及图片相对于其所在页面的相对坐标，根据相对坐标与容器的宽高生成透明覆盖层；在透明覆盖层上定位链接区域包括根据图片上设定的链接区域的信息及容器的宽高，将链接区域相对于图片的坐标转化为链接区域的动态坐标信息，在透明覆盖层上根据用户自定义的容器宽高和根据动态坐标信息插入链接区域，将生成的透明覆盖层覆盖到图片。

由此，用户可以自由定义展示位的大小，透明覆盖层可以根据具体图片展示位的大小灵活定位链接区域，减少维护成本。

另外，本发明还公开了一种利用图片生成链接的系统。该系统包括：图片层单元，设置为展示信息，提供链接区域；图片链接设置单元，设置为获取图片，并为图片设定链接区域；图片覆盖层生成单元，设置为根据链接区域的形状信息及链接区域相对于图片的坐标生成代码，创建图片覆盖层；图片覆盖层单元，设置为覆盖在图片层上，为在图片上设定的链接区域提供信息地址的链接；页面显示单元，设置为供访问图片的不同区域，以跳转至图片覆盖层所对应的不同区域上的信息地址的链接。

通过本系统中生成图片覆盖层单元放置于图片层单元上，实现了在一幅图中展示多个信息链接，并能使信息显示层和图片展示层相分离，节省了服务器带宽。

在一些实施方式中，其中图片覆盖层是信息地址的链接，图片覆盖层生成单元配置为根据形状信息及坐标生成链接插入代码，并在图片所在的页面插入生成的链接插入代码，从而在图片的不同区域形成信息地址的链接。由此，可以实现在一幅图片上放置多个信息地址链接。

在一些实施方式中，其中图片覆盖层单元是透明覆盖层单元，图片覆盖层生成单元包括透明覆盖层生成模块和链接区域定位模块，透明覆盖层生成模块配置为生成用于生成透明覆盖层的代码，链接区域定位模块配置为生成在透明覆盖层上定位链接区域的定位代码，在图片所在的页面嵌入生成的代码，从而在图片上形成包含不同链接区域的透明覆盖层。由此，可以把信息显示层与图片展示层进行完全的分离，即使图片展示层没有加载完成，亦可以实现跳转，增加了信息显示的转化率，并可以随意更换图片，只要链接信息不发生变化，就不用修改代码，节省流量，减少维护成本。而且，鼠标进入透明覆盖层时，由于在覆盖层已绑定了鼠标移动事件，就可以利用鼠标事件计算用户的鼠标滑动轨迹并把这些信息发送到大数据收集平台，从而能够更多的了解用户行为，增加信息定位的精准度。

在一些实施方式中，对于宽高固定的预定展示位，透明覆盖层生成模块的内容包括设定图片的宽高为展示位的宽高，计算图片相对于其所在页面的相对坐标，根据相对坐标与广告位的宽高生成透明覆盖层；链接区域定位模块的内容包括在透明覆盖层中根据形状信息及链接区域相对于图片的坐标对图片链接区域进行定位，并把生成的透明覆盖层覆盖到图片所在页面的相对位置；对于宽高不固定的预定展示位，由用户自定义容器的宽高，透明覆盖层生成模块的内容包括计算容器的宽高及图片相对于其所在页面的相对坐标，根据相对坐标与容器的宽高生成透明覆盖层；链接区域定位模块的内容包括根据图片上设定的链接区域的信息，将链接区域相对于图片的坐标转化为链接区域的动态坐标信息，根据容器的宽高和动态坐标信息插入链接区域，并把生成的透明覆盖层插入图片。由此，用户可以自由定义展示位的大小，透明覆盖层可以根据具体图片展示位的大小灵活定位链接区域，减少维护成本。

通过本发明提供的方法和系统，可以实现广告与展示的分离，增加了广告转化率，节省了服务器带宽，减少了维护广告链接的成本。

附图说明

图1为本发明一实施方式的利用图片生成链接的方法流程示意图；

图2为本发明另一实施方式的利用图片生成链接的方法流程示意图；

图3为本发明一实施方式的利用图片生成链接的广告位结构示意图；

图4为图1所示方式中生成广告代码的过程示意图；

图5为图2所示方式中生成透明覆盖层的过程示意图；

图6为图2所示方式中生成透明覆盖层的过程示意图。

具体实施方式

下面结合附图对本发明作进一步详细的说明。

图1示意性地显示了根据本发明的一种实施方式的利用图片生成链接以访问信息显示区的方法。在所示的实施例中，以广告位作为信息显示区的例子。其中，图1(a)是形成广告位的过程示意图，图1(b)是用户访问广告位的过程示意图。

如图1(a)所示，创建信息展示位(广告位)的过程如下：

步骤S1101：获取图片，设定图片的宽高。

广告管理服务器上部署有广告系统，在广告系统中存储了大量的图片地址。当需要生成广告位时，广告管理服务器首先从广告系统中获取广告位所在图片的地址，渲染图片，并设定图片的宽和高。其中，当广告位的宽和高确定时，根据广告位的宽和高设定图片的宽和高；当广告位的宽和高未确定时，将图片的宽和高作为广告位默认的宽和高。

步骤S1102:设定图片的链接区域。

用鼠标在图片上拖拽获取需要插入链接的区域，并调整拖拽区域，使其能完全包含想要进行广告链接的图片区域。通过鼠标事件获取拖拽区域相对于其所在图片的坐标(即以图片的左上角为原点，在水平向右的x轴及竖直向下的y轴方向上的相对偏移量)，并记录拖拽区域的形状信息。其中，拖拽区域的形状可以是包括圆和椭圆的圆形、包括正方形和长方形的四边形或其他多边形。

步骤S1103：生成广告代码。

根据图片原点位置及拖拽信息，即拖拽区域相对于其所在图片的坐标和拖拽区域的形状信息，计算确定广告链接区域的插入位置，并生成用于生成和定位链接区域的javasrcipt模板代码，并根据该模板代码的路径生成广告代码给需要添加广告的页面。

例如，如图4所示，在图片402上拖拽获取一个宽高为20*10的矩形区域4021。根据鼠标绑定的鼠标事件，拖拽时鼠标事件捕捉显示的图片上的坐标点40210为x＝30,y＝30,而图片402在网页401中插入的原点4020的位置坐标为x＝330,y＝330。根据步骤S1102中选取的相对坐标轴，则在网页401中链接区域的插入位置就是坐标为x＝360,y＝300的宽高20*10的矩形区域4021。生成的javascript模板代码就通过javascript脚本绘制出一个宽高为20*10容器层4021a，将容器层4021a设定为链接样式，并为其指定链接信息地址，然后根据坐标位置x＝360,y＝300把这个容器层4021a定位在广告链接区域。对于一个图片上的多个拖拽区域4022，每个拖拽区域4022都对应生成一个javascript模板代码，把所有的javascript模板代码地址组合形成最终的广告代码。

步骤S1104：插入广告位。

在广告位所在网页插入生成的广告代码，应用广告代码中提供的生成和定位链接区域的javascript模板代码，载入广告链接地址，从而完成广告链接的插入。

步骤S1105：在完成广告链接的插入后，网页中显示的图片就是包含了多个链接地址信息的广告位图片，由此而形成广告位。

通过以上步骤，在网页上就形成了一幅含有多个广告链接的广告位图片，用户就可以通过页面浏览器对广告位进行访问。

如图1(b)所示，用户通过页面浏览器对广告位进行访问的具体过程如下：

步骤S1201：用户打开页面浏览器访问页面上的广告位。

步骤S1202：点击广告位图片上的嵌入有信息地址链接的区域。

步骤S1203：通过已在不同区域内嵌入的信息地址的链接跳转到相应的广告地址链接，展示广告信息给用户。

图2示意性地显示了根据本发明的另一种实施方式的利用图片生成信息链接的方法。其中，图2(a)是形成广告位的过程示意图，图2(b)是用户访问广告位的过程示意图。如图2(a)所示，该方法包括：

步骤S2101：获取图片，设定图片的宽高。

在广告管理服务器的广告系统中存储了大量的图片地址。当需要生成广告位时，广告管理服务器首先从广告系统中获取广告位所在的图片，并设定图片的宽和高。其中，当广告位的宽和高确定时，根据广告位的宽和高设定图片的宽和高；当广告位的宽和高未确定时，将图片的宽和高作为广告位的默认宽和高。

步骤S2102：设定图片的链接区域。

用鼠标在图片上拖拽来确定需要插入链接的区域。调整拖拽区域，使其能精确包含想要提供广告链接的图片区域，通过鼠标事件获取拖拽区域相对于其所在图片的坐标(即x、y轴方向上的相对偏移量)，并记录拖拽区域的形状信息。其中，拖拽区域的形状可以是圆形、椭圆形、三角形、四边形或其他多边形。

步骤S2103：生成透明覆盖层。

透明覆盖层的生成是动态的过程，即需要考虑两种不同类型的广告：第一种是确定了广告位的宽和高的；第二种是广告位的宽和高没有确定，而是用户自定义容器的宽和高。

对于第一种类型的广告，先计算广告图片在其所在页面上的相对坐标。根据这个相对坐标和广告位的宽高，生成透明覆盖层的生成代码，然后根据图片链接区域的形状信息和图片链接区域相对于图片的坐标生成对透明覆盖层上的图片区域进行定位的javascript脚本代码。

例如，假设确定的广告位大小为200*200。如图5所示，广告图片502的宽高就设定为200*200。通过步骤S2102在图片502上拖拽获取了宽高40*20，相对坐标50210位置x＝15,y＝15的矩形链接区域5021。而图片502在网页501中插入的原点5020的位置坐标为x＝330,y＝330。首先生成创建宽高200*200的透明层503，并将透明层503覆盖到图片502上的javascript代码。然后根据图片原点5020坐标和链接区域相对坐标50210计算出链接区域在网页501的坐标位置x＝345,y＝315。根据链接区域的形状信息即宽高为40*20的矩形区域，及在网页的坐标位置x＝345,y＝315，在透明覆盖层503上根据链接区域的位置生成一个链接5031，并设定其样式为链接区域的形状，即完成生成定位链接区域位置的javascript脚本代码。

对于第二种类型的广告，首先自动计算容器的宽和高，根据容器的宽高及广告图片相对于其所在页面的相对坐标，生成透明覆盖层的生成代码。然后根据容器的宽和高、已设定的链接区域的坐标和形状信息，计算出图片链接区域相对于其所在广告图片的动态坐标信息，最后根据这个动态坐标信息和容器的宽高，生成用于在透明覆盖层上插入图片链接区域的javascript脚本代码。

例如，如图6所示，假设获取的图片602的宽高为200*200。通过步骤S2102在图片602上拖拽获取了宽高为40*20，相对坐标60210位置x＝15,y＝15的矩形链接区域6021，用户自定义了容器603的宽高。首先生成自动计算容器603宽高的javascript代码。当打开浏览器时，根据加载的这段javascript代码就能获取到容器603的宽高w*h，并将广告图片602根据容器603的宽高按比例自适应大小。然后，由此生成创建宽高为w*h的透明层604和生成根据容器603在其所在页面601的原点6030位置坐标将透明层604覆盖到图片602上的javascript代码。假设容器603在网页中插入的原点位置6030坐标为x＝330,y＝330，则根据容器603的宽高、广告图片602的宽高及链接区域相对坐标60210，计算出链接区域在网页601中相对于广告图片602的实际动态坐标位置x1＝x*(h/200),y1＝y*(w/200)。然后根据链接区域的形状信息即宽高为40*20的矩形区域，及在网页601的坐标位置x1＝330+15*(h/200),y1＝330-15*(w/200)，在链接区域的位置上生成一个链接6041，并设定其样式为链接区域的形状，即完成生成定位链接区域位置的javascript脚本代码。

步骤S2104：在广告位所在页面上插入步骤S2103中的javascript脚本，形成广告位。

由此，就形成了图片层上覆盖透明覆盖层的包含多个链接区域的图片广告位，用户通过页面浏览器就可以对广告位进行访问。

如图2(b)所示，用户通过页面浏览器对广告位访问的具体过程如下：

步骤S2201：用户打开页面浏览器访问页面上的广告位。

步骤S2202：页面通过嵌入的javascript脚本中对图片区域进行定位的代码，把透明覆盖层定位到图片区域。

步骤S2203：点击广告位图片的不同区域。

步骤S2204：通过透明层上的信息地址链接跳转到相应的广告页面，展示广告信息给用户。

在本发明中形成的图片广告位的结构如图3所示，包含了图片层301、图片覆盖层302以及链接区域3021。其中图片层301用于展示信息，图片覆盖层302则通过在链接包含区域3021内嵌入的广告链接地址提供广告链接。当用户在访问网页时，看到图片层301上感兴趣的广告，点击就可以通过图片覆盖层302上的链接区域3021内设定的信息链接进入到广告信息页面。

图片覆盖层302可以通过现有技术中的信息地址链接实现，也可以采用图2所示实施方式中的透明覆盖层技术。透明覆盖层的技术可以实现广告与展示的分离，在图片层301未加载完成时也能实现跳转，提高了广告转化率。其中，转化率是指在一个统计周期内，用户点击广告的次数占推广信息总点击次数的比率。计算公式为：转化率＝(点击次数/点击量)*100％。例如：十名用户看到某个搜索推广的结果，其中五名用户点击了某一推广结果并被跳转到目标链接地址上，之后，其中两名用户有了后续转化的行为即点击了目标链接上的广告位图片，那么，这条推广结果的转化率就是(2/5)*100％＝40％。

而且，只要链接区域3021的位置不发生变化，对图片层301的修改和更换并不影响图片覆盖层302的广告链接，图片覆盖层302不需要随图片层301的变动而变动，只需要根据链接包含区域3021的改变，进行广告链接的调整即可。并且图片层301的文件格式也可实现自由选择，比如选择svg图片进行替换以节省流量等。由此，本发明节省了服务器带宽，减少了维护成本。

以上所述的仅是本发明的一些实施方式。对于本领域的普通技术人员来说，在不脱离本发明创造构思的前提下，还可以做出若干变形和改进，这些都属于本发明的保护范围。

Claims (9)

1.利用图片生成链接的方法，包括：

服务器获取所述图片，根据需求为所述图片设定至少一个链接区域，

根据设定的链接区域的形状信息及链接区域相对于所述图片的坐标生成代码，创建图片覆盖层，其中，每个链接区域对应一图片覆盖层，

当访问所述图片的不同区域时，跳转至所述不同区域上的图片覆盖层所对应的信息地址的链接。

2.根据权利要求1所述的方法，其中所述图片覆盖层是信息地址的链接，

所述生成代码，创建图片覆盖层包括：

根据所述形状信息及所述坐标生成链接插入代码，并在所述图片所在的页面插入生成的所述的链接插入代码，从而在所述图片的不同区域形成信息地址的链接。

3.根据权利要求1所述的方法，其中所述图片覆盖层是透明覆盖层，

所述生成代码，创建图片覆盖层包括：

生成用于生成透明覆盖层的代码和用于在所述透明覆盖层上定位链接区域的定位代码，在所述图片所在的页面嵌入生成的所述代码，从而在所述图片上形成包含不同链接区域的透明覆盖层。

4.根据权利要求3所述的方法，其中

对于宽高固定的预定展示位，所述生成透明覆盖层的步骤包括，设定所述图片的宽高为展示位的宽高，计算所述图片相对于其所在页面的相对坐标，根据所述相对坐标与所述展示位的宽高生成所述透明覆盖层，

所述在透明覆盖层上定位链接区域包括，在透明覆盖层中根据所述形状信息及所述链接区域相对于所述图片的坐标对图片链接区域进行定位，把生成的所述透明覆盖层覆盖到所述图片所在页面的相对位置；

对于宽高不固定的预定展示位，由用户自定义容器的宽高，所述生成透明覆盖层包括，计算所述容器的宽高及所述图片相对于其所在页面的相对坐标，根据所述相对坐标与所述容器的宽高生成所述透明覆盖层，

所述在透明覆盖层上定位链接区域包括，根据所述图片上设定的所述链接区域的信息及容器的宽高，将所述链接区域相对于所述图片的坐标转化为所述链接区域的动态坐标信息，在透明覆盖层上根据所述容器的宽高和根据所述动态坐标信息插入链接区域，将生成的所述透明覆盖层覆盖所述图片。

5.实现权利要求1所述的利用图片生成链接的方法的系统，包括：

图片层单元，设置为展示信息，提供至少一个链接区域；

图片链接设置单元，设置为获取所述图片，并根据需求为所述图片设定至少一个链接区域；

图片覆盖层生成单元，设置为根据所述链接区域的形状信息及所述链接区域相对于所述图片的坐标生成代码，创建图片覆盖层；

图片覆盖层单元，设置为覆盖在所述图片层上，为所述图片上设定的链接区域提供信息地址的链接，其中，每个链接区域对应一个图片覆盖层；

页面显示单元，设置为提供访问所述图片的不同区域，以跳转至所述图片覆盖层所对应的所述不同区域上的信息地址的链接。

6.根据权利要求5所述的系统，其中所述图片覆盖层是信息地址的链接，所述图片覆盖层生成单元配置为根据所述形状信息及所述坐标生成链接插入代码，并在所述图片所在的页面插入生成的所述的链接插入代码，从而在所述图片的不同区域形成信息地址的链接。

7.根据权利要求5所述的系统，其中所述图片覆盖层单元是透明覆盖层单元，所述图片覆盖层生成单元包括透明覆盖层生成模块和链接区域定位模块，所述透明覆盖层生成模块配置为生成用于生成透明覆盖层的代码，所述链接区域定位模块配置为生成在所述透明覆盖层上定位链接区域的定位代码；在所述图片所在的页面嵌入生成的所述代码，从而在所述图片上形成包含不同链接区域的透明覆盖层。

8.根据权利要求7所述的系统，其中

所述透明覆盖层生成模块的内容包括：对于固定宽高的预定展示位，设定所述图片的宽高为展示位的宽高，计算所述图片相对于其所在页面的相对坐标，根据所述相对坐标与所述展示位的宽高生成所述透明覆盖层，

所述链接区域定位模块的内容包括：对于固定宽高的预定展示位，在透明覆盖层中根据所述形状信息及所述链接区域相对于所述图片的坐标对图片链接区域进行定位，并把生成的所述透明覆盖层覆盖到所述图片所在页面的相对位置。

9.根据权利要求7所述的系统，其中

所述透明覆盖层生成模块的内容包括：对于宽高不固定的预定展示位，由用户自定义容器的宽高，计算容器的宽高及所述图片相对于其所在页面的相对坐标，根据所述相对坐标与所述容器的宽高生成所述透明覆盖层，

所述链接区域定位模块的内容包括：对于宽高不固定的预定展示位，根据所述图片上设定的所述链接区域的信息，将所述链接区域相对于所述图片的坐标转化为所述链接区域的动态坐标信息， 根据所述容器的宽高和所述动态坐标信息插入链接区域，并把生成的所述透明覆盖层插入所述图片。