CN102609414A - 一种基于浏览器的图片热区突出显示方法、装置及*** - Google Patents

Abstract

本发明公开了一种基于浏览器的图片热区突出显示方法、装置及***，可以在不同浏览器中，对任意形状的图片热区实现突显效果。该方法为：采用确定的浏览器适配的图形绘制方式，绘制图片热区的突显展示区域和背景区域；将所述背景区域、所述突显展示区域以及所述当前图片的图片区域进行顺序叠加，并将所述图片区域设置为能够观察到下层区域的形式；采用所述图形绘制方式，在所述突显展示区域绘制热区形状。

Description

一种基于浏览器的图片热区突出显示方法、装置及***

技术领域

本发明涉及WEB应用技术领域，特别是指一种基于浏览器的图片热区突出显示方法、装置及***。

背景技术

目前在设计互联网门户网站页面时，特别是首页，广告页等页面中，为了达到与设计时效果图一样美观的效果，通常会将设计时的图片完整的***页面中，然后通过图片热区技术，达到点击图片的不同部位时，可以打开不同的超链接的效果。

利用图片热区技术设计页面的方法虽好，但是存在热区显示区域不直观的问题，用户没法知道热区的确切范围，给热区的展现和维护带来极大不便，因此产生对图片热区的突出显示的要求。

目前，已知突显图片热区的方法是通过绝对定位的方式，利用样式设定一个空的DIV层位置的top/left属性，使空DIV层符合设置的热区区域，通过替换DIV层背景，实现热区突显，这种方式只能实现矩形热区的突显，不支持圆形和多边形热区的突显，而且需要额外制作一张图片突显图，工序比较麻烦。

发明内容

本发明提供一种基于浏览器的图片热区突出显示方法、装置及***，可以在不同浏览器中，对任意形状的图片热区实现突显效果。

本发明实施例提供的一种基于浏览器的图片热区突出显示方法，包括以下步骤：

采用确定的浏览器适配的图形绘制方式，绘制图片热区的突显展示区域和背景区域；

将所述背景区域、所述突显展示区域以及所述当前图片的图片区域进行顺序叠加，并将所述图片区域设置为能够观察到下层区域的形式；

采用所述图形绘制方式，在所述突显展示区域绘制热区形状。

本发明实施例提供的一种基于浏览器的图片热区突出显示装置，包括：

绘制方式确定单元，用于确定浏览器适配的图形绘制方式；

绘制单元，用于采用所述图形绘制方式，绘制图片热区的突显展示区域和背景区域；将所述背景区域、所述突显展示区域以及所述当前图片的图片区域进行顺序叠加，并将所述图片区域设置为能够观察到下层区域的形式；采用所述图形绘制方式，在所述突显展示区域绘制热区形状。

本发明实施例提供的一种基于浏览器的图片热区突出显示***，其特征在于，包括：

浏览器，用于向突显单元发送图片热区突显请求；

突显单元，用于确定浏览器适配的图形绘制方式；采用所述图形绘制方式，绘制图片热区的突显展示区域和背景区域；将所述背景区域、所述突显展示区域以及所述当前图片的图片区域进行顺序叠加，将所述图片区域设置为能够观察到下层区域的形式；采用所述图形绘制方式，在所述突显展示区域绘制热区形状。

本发明实施例中，采用浏览器适配的图形绘制方式，绘制图片热区的突显展示区域和背景区域；将所述背景区域、所述突显展示区域以及所述当前图片的图片区域进行顺序叠加，将所述图片区域设置为能够观察到下层区域的形式；采用所述图形绘制方式，在所述突显展示区域绘制热区形状。通过本方案，可方便的在不同浏览器中，对任意形状的图片热区实现突显效果，解决以往热区显示不直观，维护不方便的问题，提高用户体验。

附图说明

图1为实现本发明方法的流程示意图；

图2为本发明实现基于浏览器的图片热区突出显示方法的具体实施例的流程示意图；

图3为本发明装置的结构示意图。

具体实施方式

为了实现在不同的浏览器中，对任意形状的图片热区实现突显效果，本发明实施例采用浏览器适配的图形绘制方式，绘制图片热区的突显展示区域和背景区域，也就是根据不同的浏览器采用不同的图形绘制技术绘制图片热区形状；将所述背景区域、所述突显展示区域以及所述当前图片的图片区域进行顺序叠加，并将所述图片区域设置为能够观察到下层区域的形式；采用所述图形绘制方式，在所述突显展示区域绘制热区形状。通过本方案，可方便的在不同浏览器中，对任意形状的图片热区实现突显效果，解决以往热区显示不直观，维护不方便的问题，提高用户体验。

参见图1所示，本发明实施例方法的具体过程如下：

步骤101：采用确定的浏览器适配的图形绘制方式，绘制图片热区的突显展示区域和背景区域；

可以通过Javascript确定浏览器适配的图形绘制方式。

这里，可以将所述突显展示区域和所述背景区域绘制成与所述当前图片的大小相同，当然也可以不同。

绘制的背景区域中可以进一步采用所述当前图片填充，还可以采用设定的图片内容填充。

步骤102：将所述背景区域、所述突显展示区域以及所述当前图片的图片区域进行顺序叠加。

可以将所述图片区域设置为能够观察到下层区域的形式，比如：将所述图片区域设置为透明色，或半透明色。本实施例中，可以将图片区域设置为透明色，保留原有热区点击效果，当然也可以将图片热区设置为其他可以能观察到下层区域内容的任何形式都可以，比如半透明色等。

步骤103：采用所述图形绘制方式，在所述突显展示区域绘制热区形状。

比如：可以提取热区的坐标和形状信息，在所述突显展示区域按照所述热区的坐标和形状信息创建突显形状元素。

下面结合具体实施方式和附图，对本发明做进一步详细的说明：

如图2所示，在如下实施例中，突显模块接收到浏览器发送的图片热区突显请求后，执行了热区突出显示的步骤，而且，图形绘制技术即为图1中所示实施方式中提及的图形绘制方式，具体如下：

步骤201：浏览器向突显模块发送图片热区突显请求。

这里，浏览器向突显模块发送请求的方式可以通过在页面加载的onload事件中，也可通过其他页面事件触发突显模块Javascript方法的执行。

步骤202：突显模块判断浏览器支持的图形绘制技术。

突显模块通过Javascript方法检查当前浏览器支持的图形绘制技术，目前主流浏览器支持的图形绘制技术主要有VML和CANVAS这两种方式，ie及ie内核的浏览器主要采用VML方式绘制图形(ie9开始支持HTML5的CANVAS(2D)方式)，Firefox、Opera、Safari、Chrome浏览器支持CANVAS，对于其他不支持以上两种方式的浏览器采用JS绘图脚本库例如：jsgraphics进行支持。

步骤203：确定适配的图形绘制技术。

不同图形绘制技术，支持的html图形标签不一样，这里，根据上一步的判断确定采用的图形绘制技术，保证采用恰当图形绘制技术绘制图形。

步骤204：通过Javascript获取图片大小信息。

步骤205：使用适配的图形绘制技术绘制与图片大小相同突显展现区域作为突显形状绘图板。

通过Javascript技术根据不同的绘制技术创建绘图板元素，设置其大小与图片大小相同的，并放入图片元素之前。

步骤206：使用适配的技术绘制与图片大小相同的背景区域作为绘图板的背景。

通过Javascript技术根据不同的绘制技术创建背景区域元素，设置其大小与图片大小相同的，并放入绘图板元素之前。

步骤207：在背景区域绘制当前图片。

通过Javascript技术根据不同的绘制技术在背景区域绘制一个矩形对象，并填充图片作为背景。

步骤208：使用html绝对定位的方式将突显绘图板、背景区域、图片区域按图形绘制顺序重合叠加。

通过设置突显绘图板、背景区域、图片区域元素的样式position属性为absolute，top、left属性为0，将上述三个元素重合叠加显示。

步骤209：将图片区域设为透明。

经过上一步骤，突显绘图板、背景区域、图片区域三个元素已重合叠加，但由于图片区域在顶层，突显绘图板无法显示，需要将图片区域设置为透明，对于ie浏览器，可采用Alpha滤镜的方式，其他浏览器可通过样式设置透明度为0实现。

步骤210：通过Javascript提取图片热区坐标和形状信息。

步骤211：根据热区坐标和形状，采用适配的图形绘制技术在突显绘图板上绘制热区突显形状。

根据热区的坐标和形状信息，通过Javascript技术根据不同的绘制技术在突显绘图板区域元素内，创建突显形状元素，完成热区形状的绘制。

在上述实施例中，通过Javascript判断浏览器支持的图形绘制技术，确定浏览器支持的图形显示技术；采用适配的图形绘制技术，绘制图片热区突显展现区域、背景区域，使用当前图片作为图片热区突显背景区的背景图；使用Html绝对定位技术将展现区域、背景区域、图片区域重合叠加，并将图片区域设为透明；提取图片热区坐标数据，根据热区形状，采用适配的图形绘制技术，在热区突显展现区绘制热区形状；

参见图3所示，本发明实施例的一种基于浏览器的图片热区突出显示装置，包括：绘制方式确定单元31和绘制单元32。其中，

绘制方式确定单元31，用于确定浏览器适配的图形绘制方式；

绘制单元32，用于采用所述图形绘制方式，绘制图片热区的突显展示区域和背景区域；将所述背景区域、所述突显展示区域以及所述当前图片的图片区域进行顺序叠加，而且可以将所述图片区域设置为能够观察到下层区域的形式；采用所述图形绘制方式，在所述突显展示区域绘制热区形状。

所述绘制单元32，用于将所述突显展示区域和所述背景区域绘制与所述当前图片相同的大小。

所述绘制单元32，进一步采用所述当前图片填充绘制的背景区域，或采用设定的图片内容填充绘制的背景区域。

所述绘制单元32，用于提取热区的坐标和形状信息，在所述突显展示区域按照所述热区的坐标和形状信息创建突显形状元素。

所述绘制方式确定单元31，用于通过Javascript确定浏览器适配的图形绘制方式。

所述绘制单元32，可以用于将所述图片区域设置为透明色，或半透明色。

本发明实施例提供的一种基于浏览器的图片热区突出显示***可以包括：浏览器和突显单元。其中，

浏览器，用于向突显单元发送图片热区突显请求；

突显单元，用于确定浏览器适配的图形绘制方式；采用所述图形绘制方式，绘制图片热区的突显展示区域和背景区域；将所述背景区域、所述突显展示区域以及所述当前图片的图片区域进行顺序叠加，并将所述图片区域设置为能够观察到下层区域的形式；采用所述图形绘制方式，在所述突显展示区域绘制热区形状。

上述突显单元还可以利用图2所示装置的方案实现，具体不再赘述。

本发明实施例根据不同的浏览器采用不同的图形绘制技术绘制热区形状，采用适配的图形绘制技术绘制与图片大小相同热区突显区域和背景区域，使用图片填充背景区域，使用绝对定位技术将图片区域、突显区域和背景区域顺序重合叠加，将所述图片区域设置为能够观察到下层区域的形式，比如：将图片区域设置为透明色，保留原有热区点击效果，通过Javascript技术提取热区的坐标和形状信息，采用适配的图形绘制技术在热区突显区域绘制热区突显形状。

本发明方案是一种能够方便在浏览器上对图片热区进行突出显示的方法，通过本方案中包含的突显显示步骤，无需额外制作突显的图片，完全支持任意形状的热区突出显示，可用于展现图片热区的高亮、框显等突出显示效果，提高用户体验；也可用于在热区的更新维护时，方便用户对热区的选取，降低用户维护热区的难度。

显然，本领域的技术人员可以对本发明进行各种改动和变型而不脱离本发明的精神和范围。这样，倘若本发明的这些修改和变型属于本发明权利要求及其等同技术的范围之内，则本发明也意图包含这些改动和变型在内。

Claims (13)

1.一种基于浏览器的图片热区突出显示方法，其特征在于，该方法包括以下步骤：

采用确定的浏览器适配的图形绘制方式，绘制图片热区的突显展示区域和背景区域；

将所述背景区域、所述突显展示区域以及所述当前图片的图片区域进行顺序叠加，并将所述图片区域设置为能够观察到下层区域的形式；

采用所述图形绘制方式，在所述突显展示区域绘制热区形状。

2.根据权利要求1所述的方法，其特征在于，所述突显展示区域和所述背景区域与所述当前图片的大小相同。

3.根据权利要求1所述的方法，其特征在于，绘制的背景区域中进一步采用所述当前图片填充，或采用设定的图片内容填充。

4.根据权利要求1所述的方法，其特征在于，在所述突显展示区域绘制热区形状，包括：

提取热区的坐标和形状信息，在所述突显展示区域按照所述热区的坐标和形状信息创建突显形状元素。

5.根据权利要求1所述的方法，其特征在于，将所述图片区域设置为能够观察到下层区域的形式，包括：

将所述图片区域设置为透明色，或半透明色。

6.根据权利要求1所述的方法，其特征在于，通过Javascript确定浏览器适配的图形绘制方式。

7.一种基于浏览器的图片热区突出显示装置，其特征在于，该装置包括：

绘制方式确定单元，用于确定浏览器适配的图形绘制方式；

绘制单元，用于采用所述图形绘制方式，绘制图片热区的突显展示区域和背景区域；将所述背景区域、所述突显展示区域以及所述当前图片的图片区域进行顺序叠加，并将所述图片区域设置为能够观察到下层区域的形式；采用所述图形绘制方式，在所述突显展示区域绘制热区形状。

8.根据权利要求7所述的装置，其特征在于，所述绘制单元，用于将所述突显展示区域和所述背景区域绘制与所述当前图片相同的大小。

9.根据权利要求7所述的装置，其特征在于，所述绘制单元，进一步采用所述当前图片填充绘制的背景区域，或采用设定的图片内容填充绘制的背景区域。

10.根据权利要求7所述的装置，其特征在于，所述绘制单元，用于提取热区的坐标和形状信息，在所述突显展示区域按照所述热区的坐标和形状信息创建突显形状元素。

11.根据权利要求7所述的装置，其特征在于，所述绘制单元，用于将所述图片区域设置为透明色，或半透明色。

12.根据权利要求7所述的装置，其特征在于，所述绘制方式确定单元，用于通过Javascript确定浏览器适配的图形绘制方式。

13.一种基于浏览器的图片热区突出显示***，其特征在于，包括：

浏览器，用于向突显单元发送图片热区突显请求；

突显单元，用于确定浏览器适配的图形绘制方式；采用所述图形绘制方式，绘制图片热区的突显展示区域和背景区域；将所述背景区域、所述突显展示区域以及所述当前图片的图片区域进行顺序叠加，将所述图片区域设置为能够观察到下层区域的形式；采用所述图形绘制方式，在所述突显展示区域绘制热区形状。

Images