專利名稱：一種基于瀏覽器的圖片熱區(qū)突出顯示方法、裝置及系統(tǒng)的制作方法
技術(shù)領(lǐng)域：
本發(fā)明涉及WEB應(yīng)用技術(shù)領(lǐng)域，特別是指一種基于瀏覽器的圖片熱區(qū)突出顯示方法、裝置及系統(tǒng)。
背景技術(shù)：
目前在設(shè)計(jì)互聯(lián)網(wǎng)門戶網(wǎng)站頁(yè)面時(shí)，特別是首頁(yè)，廣告頁(yè)等頁(yè)面中，為了達(dá)到與設(shè)計(jì)時(shí)效果圖一樣美觀的效果，通常會(huì)將設(shè)計(jì)時(shí)的圖片完整的插入頁(yè)面中，然后通過圖片熱區(qū)技術(shù)，達(dá)到點(diǎn)擊圖片的不同部位時(shí)，可以打開不同的超鏈接的效果。利用圖片熱區(qū)技術(shù)設(shè)計(jì)頁(yè)面的方法雖好，但是存在熱區(qū)顯示區(qū)域不直觀的問題， 用戶沒法知道熱區(qū)的確切范圍，給熱區(qū)的展現(xiàn)和維護(hù)帶來極大不便，因此產(chǎn)生對(duì)圖片熱區(qū)的突出顯示的要求。目前，已知突顯圖片熱區(qū)的方法是通過絕對(duì)定位的方式，利用樣式設(shè)定一個(gè)空的 DIV層位置的top/left屬性，使空DIV層符合設(shè)置的熱區(qū)區(qū)域，通過替換DIV層背景，實(shí)現(xiàn)熱區(qū)突顯，這種方式只能實(shí)現(xiàn)矩形熱區(qū)的突顯，不支持圓形和多邊形熱區(qū)的突顯，而且需要額外制作一張圖片突顯圖，工序比較麻煩。

發(fā)明內(nèi)容
本發(fā)明提供一種基于瀏覽器的圖片熱區(qū)突出顯示方法、裝置及系統(tǒng)，可以在不同瀏覽器中，對(duì)任意形狀的圖片熱區(qū)實(shí)現(xiàn)突顯效果。本發(fā)明實(shí)施例提供的一種基于瀏覽器的圖片熱區(qū)突出顯示方法，包括以下步驟采用確定的瀏覽器適配的圖形繪制方式，繪制圖片熱區(qū)的突顯展示區(qū)域和背景區(qū)域；將所述背景區(qū)域、所述突顯展示區(qū)域以及所述當(dāng)前圖片的圖片區(qū)域進(jìn)行順序疊加，并將所述圖片區(qū)域設(shè)置為能夠觀察到下層區(qū)域的形式；采用所述圖形繪制方式，在所述突顯展示區(qū)域繪制熱區(qū)形狀。本發(fā)明實(shí)施例提供的一種基于瀏覽器的圖片熱區(qū)突出顯示裝置，包括繪制方式確定單元，用于確定瀏覽器適配的圖形繪制方式；繪制單元，用于采用所述圖形繪制方式，繪制圖片熱區(qū)的突顯展示區(qū)域和背景區(qū)域；將所述背景區(qū)域、所述突顯展示區(qū)域以及所述當(dāng)前圖片的圖片區(qū)域進(jìn)行順序疊加，并將所述圖片區(qū)域設(shè)置為能夠觀察到下層區(qū)域的形式；采用所述圖形繪制方式，在所述突顯展示區(qū)域繪制熱區(qū)形狀。本發(fā)明實(shí)施例提供的一種基于瀏覽器的圖片熱區(qū)突出顯示系統(tǒng)，其特征在于，包括瀏覽器，用于向突顯單元發(fā)送圖片熱區(qū)突顯請(qǐng)求；突顯單元，用于確定瀏覽器適配的圖形繪制方式；采用所述圖形繪制方式，繪制圖片熱區(qū)的突顯展示區(qū)域和背景區(qū)域；將所述背景區(qū)域、所述突顯展示區(qū)域以及所述當(dāng)前圖
4片的圖片區(qū)域進(jìn)行順序疊加，將所述圖片區(qū)域設(shè)置為能夠觀察到下層區(qū)域的形式；采用所述圖形繪制方式，在所述突顯展示區(qū)域繪制熱區(qū)形狀。本發(fā)明實(shí)施例中，采用瀏覽器適配的圖形繪制方式，繪制圖片熱區(qū)的突顯展示區(qū)域和背景區(qū)域；將所述背景區(qū)域、所述突顯展示區(qū)域以及所述當(dāng)前圖片的圖片區(qū)域進(jìn)行順序疊加，將所述圖片區(qū)域設(shè)置為能夠觀察到下層區(qū)域的形式；采用所述圖形繪制方式，在所述突顯展示區(qū)域繪制熱區(qū)形狀。通過本方案，可方便的在不同瀏覽器中，對(duì)任意形狀的圖片熱區(qū)實(shí)現(xiàn)突顯效果，解決以往熱區(qū)顯示不直觀，維護(hù)不方便的問題，提高用戶體驗(yàn)。


圖I為實(shí)現(xiàn)本發(fā)明方法的流程示意圖；圖2為本發(fā)明實(shí)現(xiàn)基于瀏覽器的圖片熱區(qū)突出顯示方法的具體實(shí)施例的流程示意圖；圖3為本發(fā)明裝置的結(jié)構(gòu)示意圖。
具體實(shí)施例方式為了實(shí)現(xiàn)在不同的瀏覽器中，對(duì)任意形狀的圖片熱區(qū)實(shí)現(xiàn)突顯效果，本發(fā)明實(shí)施例采用瀏覽器適配的圖形繪制方式，繪制圖片熱區(qū)的突顯展示區(qū)域和背景區(qū)域，也就是根據(jù)不同的瀏覽器采用不同的圖形繪制技術(shù)繪制圖片熱區(qū)形狀；將所述背景區(qū)域、所述突顯展示區(qū)域以及所述當(dāng)前圖片的圖片區(qū)域進(jìn)行順序疊加，并將所述圖片區(qū)域設(shè)置為能夠觀察到下層區(qū)域的形式；采用所述圖形繪制方式，在所述突顯展示區(qū)域繪制熱區(qū)形狀。通過本方案，可方便的在不同瀏覽器中，對(duì)任意形狀的圖片熱區(qū)實(shí)現(xiàn)突顯效果，解決以往熱區(qū)顯示不直觀，維護(hù)不方便的問題，提高用戶體驗(yàn)。參見圖I所示，本發(fā)明實(shí)施例方法的具體過程如下步驟101 :采用確定的瀏覽器適配的圖形繪制方式，繪制圖片熱區(qū)的突顯展示區(qū)域和背景區(qū)域；可以通過Javascript確定瀏覽器適配的圖形繪制方式。這里，可以將所述突顯展示區(qū)域和所述背景區(qū)域繪制成與所述當(dāng)前圖片的大小相同，當(dāng)然也可以不同。繪制的背景區(qū)域中可以進(jìn)一步采用所述當(dāng)前圖片填充，還可以采用設(shè)定的圖片內(nèi)容填充。步驟102 :將所述背景區(qū)域、所述突顯展示區(qū)域以及所述當(dāng)前圖片的圖片區(qū)域進(jìn)行順序置加?？梢詫⑺鰣D片區(qū)域設(shè)置為能夠觀察到下層區(qū)域的形式，比如將所述圖片區(qū)域設(shè)置為透明色，或半透明色。本實(shí)施例中，可以將圖片區(qū)域設(shè)置為透明色，保留原有熱區(qū)點(diǎn)擊效果，當(dāng)然也可以將圖片熱區(qū)設(shè)置為其他可以能觀察到下層區(qū)域內(nèi)容的任何形式都可以，比如半透明色等。步驟103 :采用所述圖形繪制方式，在所述突顯展示區(qū)域繪制熱區(qū)形狀。比如可以提取熱區(qū)的坐標(biāo)和形狀信息，在所述突顯展示區(qū)域按照所述熱區(qū)的坐標(biāo)和形狀信息創(chuàng)建突顯形狀元素。
下面結(jié)合具體實(shí)施方式
和附圖，對(duì)本發(fā)明做進(jìn)一步詳細(xì)的說明如圖2所示，在如下實(shí)施例中，突顯模塊接收到瀏覽器發(fā)送的圖片熱區(qū)突顯請(qǐng)求后，執(zhí)行了熱區(qū)突出顯示的步驟，而且，圖形繪制技術(shù)即為圖I中所示實(shí)施方式中提及的圖形繪制方式，具體如下步驟201 :瀏覽器向突顯模塊發(fā)送圖片熱區(qū)突顯請(qǐng)求。這里，瀏覽器向突顯模塊發(fā)送請(qǐng)求的方式可以通過在頁(yè)面加載的onload事件中， 也可通過其他頁(yè)面事件觸發(fā)突顯模塊Javascript方法的執(zhí)行。步驟202 :突顯模塊判斷瀏覽器支持的圖形繪制技術(shù)。突顯模塊通過Javascript方法檢查當(dāng)前瀏覽器支持的圖形繪制技術(shù)，目前主流瀏覽器支持的圖形繪制技術(shù)主要有VML和CANVAS這兩種方式，ie及ie內(nèi)核的瀏覽器主要采用VML方式繪制圖形(ie9開始支持HTML5的CANVAS (2D)方式)，F(xiàn)irefox、Opera、Safari、 Chrome瀏覽器支持CANVAS，對(duì)于其他不支持以上兩種方式的瀏覽器采用JS繪圖腳本庫(kù)例如jsgraphics進(jìn)行支持。步驟203 :確定適配的圖形繪制技術(shù)。不同圖形繪制技術(shù)，支持的html圖形標(biāo)簽不一樣，這里，根據(jù)上一步的判斷確定采用的圖形繪制技術(shù)，保證采用恰當(dāng)圖形繪制技術(shù)繪制圖形。步驟204 :通過Javascript獲取圖片大小信息。步驟205 :使用適配的圖形繪制技術(shù)繪制與圖片大小相同突顯展現(xiàn)區(qū)域作為突顯形狀繪圖板。通過Javascript技術(shù)根據(jù)不同的繪制技術(shù)創(chuàng)建繪圖板元素，設(shè)置其大小與圖片大小相同的，并放入圖片元素之前。步驟206 :使用適配的技術(shù)繪制與圖片大小相同的背景區(qū)域作為繪圖板的背景。通過Javascript技術(shù)根據(jù)不同的繪制技術(shù)創(chuàng)建背景區(qū)域元素，設(shè)置其大小與圖片大小相同的，并放入繪圖板元素之前。步驟207 :在背景區(qū)域繪制當(dāng)前圖片。通過Javascript技術(shù)根據(jù)不同的繪制技術(shù)在背景區(qū)域繪制一個(gè)矩形對(duì)象，并填充圖片作為背景。步驟208 :使用html絕對(duì)定位的方式將突顯繪圖板、背景區(qū)域、圖片區(qū)域按圖形繪制順序重合疊加。通過設(shè)置突顯繪圖板、背景區(qū)域、圖片區(qū)域元素的樣式position屬性為 absolute, top、left屬性為O,將上述三個(gè)元素重合疊加顯示。步驟209 :將圖片區(qū)域設(shè)為透明。經(jīng)過上一步驟，突顯繪圖板、背景區(qū)域、圖片區(qū)域三個(gè)元素已重合疊加，但由于圖片區(qū)域在頂層，突顯繪圖板無(wú)法顯示，需要將圖片區(qū)域設(shè)置為透明，對(duì)于ie瀏覽器，可采用 Alpha濾鏡的方式，其他瀏覽器可通過樣式設(shè)置透明度為O實(shí)現(xiàn)。步驟210 :通過Javascript提取圖片熱區(qū)坐標(biāo)和形狀信息。步驟211 :根據(jù)熱區(qū)坐標(biāo)和形狀，采用適配的圖形繪制技術(shù)在突顯繪圖板上繪制熱區(qū)突顯形狀。根據(jù)熱區(qū)的坐標(biāo)和形狀信息，通過Javascript技術(shù)根據(jù)不同的繪制技術(shù)在突顯
6繪圖板區(qū)域元素內(nèi)，創(chuàng)建突顯形狀元素，完成熱區(qū)形狀的繪制。在上述實(shí)施例中，通過Javascript判斷瀏覽器支持的圖形繪制技術(shù)，確定瀏覽器支持的圖形顯示技術(shù)；采用適配的圖形繪制技術(shù)，繪制圖片熱區(qū)突顯展現(xiàn)區(qū)域、背景區(qū)域， 使用當(dāng)前圖片作為圖片熱區(qū)突顯背景區(qū)的背景圖；使用Html絕對(duì)定位技術(shù)將展現(xiàn)區(qū)域、背景區(qū)域、圖片區(qū)域重合疊加，并將圖片區(qū)域設(shè)為透明；提取圖片熱區(qū)坐標(biāo)數(shù)據(jù)，根據(jù)熱區(qū)形狀，采用適配的圖形繪制技術(shù)，在熱區(qū)突顯展現(xiàn)區(qū)繪制熱區(qū)形狀；參見圖3所示，本發(fā)明實(shí)施例的一種基于瀏覽器的圖片熱區(qū)突出顯示裝置，包括 繪制方式確定單元31和繪制單元32。其中，繪制方式確定單元31，用于確定瀏覽器適配的圖形繪制方式；繪制單元32，用于采用所述圖形繪制方式，繪制圖片熱區(qū)的突顯展示區(qū)域和背景區(qū)域；將所述背景區(qū)域、所述突顯展示區(qū)域以及所述當(dāng)前圖片的圖片區(qū)域進(jìn)行順序疊加，而且可以將所述圖片區(qū)域設(shè)置為能夠觀察到下層區(qū)域的形式；采用所述圖形繪制方式，在所述突顯展示區(qū)域繪制熱區(qū)形狀。所述繪制單元32，用于將所述突顯展示區(qū)域和所述背景區(qū)域繪制與所述當(dāng)前圖片相同的大小。所述繪制單元32，進(jìn)一步采用所述當(dāng)前圖片填充繪制的背景區(qū)域，或采用設(shè)定的圖片內(nèi)容填充繪制的背景區(qū)域。所述繪制單元32，用于提取熱區(qū)的坐標(biāo)和形狀信息，在所述突顯展示區(qū)域按照所述熱區(qū)的坐標(biāo)和形狀信息創(chuàng)建突顯形狀元素。所述繪制方式確定單元31,用于通過Javascript確定瀏覽器適配的圖形繪制方式。所述繪制單元32，可以用于將所述圖片區(qū)域設(shè)置為透明色，或半透明色。本發(fā)明實(shí)施例提供的一種基于瀏覽器的圖片熱區(qū)突出顯示系統(tǒng)可以包括瀏覽器和突顯單元。其中，瀏覽器，用于向突顯單元發(fā)送圖片熱區(qū)突顯請(qǐng)求；突顯單元，用于確定瀏覽器適配的圖形繪制方式；采用所述圖形繪制方式，繪制圖片熱區(qū)的突顯展示區(qū)域和背景區(qū)域；將所述背景區(qū)域、所述突顯展示區(qū)域以及所述當(dāng)前圖片的圖片區(qū)域進(jìn)行順序疊加，并將所述圖片區(qū)域設(shè)置為能夠觀察到下層區(qū)域的形式；采用所述圖形繪制方式，在所述突顯展示區(qū)域繪制熱區(qū)形狀。上述突顯單元還可以利用圖2所示裝置的方案實(shí)現(xiàn)，具體不再贅述。本發(fā)明實(shí)施例根據(jù)不同的瀏覽器采用不同的圖形繪制技術(shù)繪制熱區(qū)形狀，采用適配的圖形繪制技術(shù)繪制與圖片大小相同熱區(qū)突顯區(qū)域和背景區(qū)域，使用圖片填充背景區(qū)域，使用絕對(duì)定位技術(shù)將圖片區(qū)域、突顯區(qū)域和背景區(qū)域順序重合疊加，將所述圖片區(qū)域設(shè)置為能夠觀察到下層區(qū)域的形式，比如將圖片區(qū)域設(shè)置為透明色，保留原有熱區(qū)點(diǎn)擊效果，通過Javascript技術(shù)提取熱區(qū)的坐標(biāo)和形狀信息，采用適配的圖形繪制技術(shù)在熱區(qū)突顯區(qū)域繪制熱區(qū)突顯形狀。本發(fā)明方案是一種能夠方便在瀏覽器上對(duì)圖片熱區(qū)進(jìn)行突出顯示的方法，通過本方案中包含的突顯顯示步驟，無(wú)需額外制作突顯的圖片，完全支持任意形狀的熱區(qū)突出顯示，可用于展現(xiàn)圖片熱區(qū)的高亮、框顯等突出顯示效果，提高用戶體驗(yàn)；也可用于在熱區(qū)的更新維護(hù)時(shí)，方便用戶對(duì)熱區(qū)的選取，降低用戶維護(hù)熱區(qū)的難度。顯然，本領(lǐng)域的技術(shù)人員可以對(duì)本發(fā)明進(jìn)行各種改動(dòng)和變型而不脫離本發(fā)明的精神和范圍。這樣，倘若本發(fā)明的這些修改和變型屬于本發(fā)明權(quán)利要求及其等同技術(shù)的范圍之內(nèi)，則本發(fā)明也意圖包含這些改動(dòng)和變型在內(nèi)。
權(quán)利要求
1.一種基于瀏覽器的圖片熱區(qū)突出顯示方法，其特征在于，該方法包括以下步驟采用確定的瀏覽器適配的圖形繪制方式，繪制圖片熱區(qū)的突顯展示區(qū)域和背景區(qū)域； 將所述背景區(qū)域、所述突顯展示區(qū)域以及所述當(dāng)前圖片的圖片區(qū)域進(jìn)行順序疊加，并將所述圖片區(qū)域設(shè)置為能夠觀察到下層區(qū)域的形式；采用所述圖形繪制方式，在所述突顯展示區(qū)域繪制熱區(qū)形狀。
2.根據(jù)權(quán)利要求I所述的方法，其特征在于，所述突顯展示區(qū)域和所述背景區(qū)域與所述當(dāng)前圖片的大小相同。
3.根據(jù)權(quán)利要求I所述的方法，其特征在于，繪制的背景區(qū)域中進(jìn)一步采用所述當(dāng)前圖片填充，或采用設(shè)定的圖片內(nèi)容填充。
4.根據(jù)權(quán)利要求I所述的方法，其特征在于，在所述突顯展示區(qū)域繪制熱區(qū)形狀，包括提取熱區(qū)的坐標(biāo)和形狀信息，在所述突顯展示區(qū)域按照所述熱區(qū)的坐標(biāo)和形狀信息創(chuàng)建突顯形狀元素。
5.根據(jù)權(quán)利要求I所述的方法，其特征在于，將所述圖片區(qū)域設(shè)置為能夠觀察到下層區(qū)域的形式，包括將所述圖片區(qū)域設(shè)置為透明色，或半透明色。
6.根據(jù)權(quán)利要求I所述的方法，其特征在于，通過Javascript確定瀏覽器適配的圖形繪制方式。
7.一種基于瀏覽器的圖片熱區(qū)突出顯示裝置，其特征在于，該裝置包括繪制方式確定單元，用于確定瀏覽器適配的圖形繪制方式；繪制單元，用于采用所述圖形繪制方式，繪制圖片熱區(qū)的突顯展示區(qū)域和背景區(qū)域；將所述背景區(qū)域、所述突顯展示區(qū)域以及所述當(dāng)前圖片的圖片區(qū)域進(jìn)行順序疊加，并將所述圖片區(qū)域設(shè)置為能夠觀察到下層區(qū)域的形式；采用所述圖形繪制方式，在所述突顯展示區(qū)域繪制熱區(qū)形狀。
8.根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述繪制單元，用于將所述突顯展示區(qū)域和所述背景區(qū)域繪制與所述當(dāng)前圖片相同的大小。
9.根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述繪制單元，進(jìn)一步采用所述當(dāng)前圖片填充繪制的背景區(qū)域，或采用設(shè)定的圖片內(nèi)容填充繪制的背景區(qū)域。
10.根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述繪制單元，用于提取熱區(qū)的坐標(biāo)和形狀信息，在所述突顯展示區(qū)域按照所述熱區(qū)的坐標(biāo)和形狀信息創(chuàng)建突顯形狀元素。
11.根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述繪制單元，用于將所述圖片區(qū)域設(shè)置為透明色，或半透明色。
12.根據(jù)權(quán)利要求7所述的裝置，其特征在于，所述繪制方式確定單元，用于通過 Javascript確定瀏覽器適配的圖形繪制方式。
13.一種基于瀏覽器的圖片熱區(qū)突出顯示系統(tǒng)，其特征在于，包括瀏覽器，用于向突顯單元發(fā)送圖片熱區(qū)突顯請(qǐng)求；突顯單元，用于確定瀏覽器適配的圖形繪制方式；采用所述圖形繪制方式，繪制圖片熱區(qū)的突顯展示區(qū)域和背景區(qū)域；將所述背景區(qū)域、所述突顯展示區(qū)域以及所述當(dāng)前圖片的圖片區(qū)域進(jìn)行順序疊加，將所述圖片區(qū)域設(shè)置為能夠觀察到下層區(qū)域的形式；采用所述圖形繪制方式，在所述突顯展示區(qū)域繪制熱區(qū)形狀。
全文摘要
本發(fā)明公開了一種基于瀏覽器的圖片熱區(qū)突出顯示方法、裝置及系統(tǒng)，可以在不同瀏覽器中，對(duì)任意形狀的圖片熱區(qū)實(shí)現(xiàn)突顯效果。該方法為采用確定的瀏覽器適配的圖形繪制方式，繪制圖片熱區(qū)的突顯展示區(qū)域和背景區(qū)域；將所述背景區(qū)域、所述突顯展示區(qū)域以及所述當(dāng)前圖片的圖片區(qū)域進(jìn)行順序疊加，并將所述圖片區(qū)域設(shè)置為能夠觀察到下層區(qū)域的形式；采用所述圖形繪制方式，在所述突顯展示區(qū)域繪制熱區(qū)形狀。
文檔編號(hào)G06F17/30GK102609414SQ20111002344
公開日2012年7月25日 申請(qǐng)日期2011年1月20日 優(yōu)先權(quán)日2011年1月20日
發(fā)明者王斌 申請(qǐng)人:中興通訊股份有限公司