利用圖片生成鏈接的方法及系統(tǒng)的制作方法
【技術(shù)領(lǐng)域】
[0001]本發(fā)明涉及一種在互聯(lián)網(wǎng)上發(fā)布信息的方式，特別涉及利用圖片生成信息鏈接的方法及系統(tǒng)。
【背景技術(shù)】
[0002]傳統(tǒng)的網(wǎng)絡(luò)頁面的鏈接技術(shù)中，基本是一幅圖片對應(yīng)一個鏈接，一個關(guān)鍵字對應(yīng)一個超鏈接。這兩種方式都存在各自的缺點(diǎn)。傳統(tǒng)的關(guān)鍵字鏈接，表現(xiàn)形式單一，如果需要提高觀賞性，需要通過背景圖的方式進(jìn)行包裝。然而采用這種方式，背景圖即使是做很小的變動，就要修改相應(yīng)的代碼，非常麻煩。而一幅圖片對應(yīng)一個鏈接的方式，一幅圖一個信息頁，成本相對較高。因?yàn)橛脩艨赡苤粚D片的某個部分感興趣，所以希望能夠提供多個入口給用戶，把相應(yīng)的流量導(dǎo)入到不同的服務(wù)站點(diǎn)。而如果使用一幅圖一個信息頁的方法，則可能需要裁剪多幅圖來達(dá)到上述效果。但是，裁剪多幅圖時，如果訪問量大，例如進(jìn)行多次訪問，則耗費(fèi)的流量多，維護(hù)多張圖花費(fèi)的人力也多。

【發(fā)明內(nèi)容】

[0003]本發(fā)明的目的在于提供一種利用圖片生成鏈接的方法及系統(tǒng)，以解決上述技術(shù)問題的至少一個。
[0004]根據(jù)本發(fā)明的一個方面，提供了一種利用圖片生成鏈接的方法，包括:服務(wù)器獲取圖片，并為圖片設(shè)定鏈接區(qū)域；根據(jù)鏈接區(qū)域的形狀信息及鏈接區(qū)域相對于圖片的坐標(biāo)生成代碼，創(chuàng)建圖片覆蓋層；當(dāng)訪問圖片的不同區(qū)域時，跳轉(zhuǎn)至不同區(qū)域上的圖片覆蓋層所對應(yīng)的信息地址的鏈接。
[0005]通過在圖片上創(chuàng)建圖片覆蓋層的方法，實(shí)現(xiàn)了在一幅圖中展示多個信息鏈接，并能使信息顯示層和圖片展示層相分離，節(jié)省了服務(wù)器帶寬。
[0006]在一些實(shí)施方式中，圖片覆蓋層可以是信息地址鏈接。其中，生成代碼，創(chuàng)建圖片覆蓋層包括:根據(jù)形狀信息及坐標(biāo)生成鏈接插入代碼，并在圖片所在的頁面插入生成的鏈接插入代碼，從而在圖片的不同區(qū)域形成信息地址的鏈接。由此，可以實(shí)現(xiàn)在一幅圖片上放置多個信息地址鏈接。
[0007]在一些實(shí)施方式中，圖片覆蓋層還可以是透明覆蓋層。其中生成代碼，創(chuàng)建圖片覆蓋層包括:生成用于生成透明覆蓋層的代碼和在透明覆蓋層上定位鏈接區(qū)域的定位代碼，在圖片所在的頁面嵌入生成的代碼，從而在圖片形成包含不同鏈接區(qū)域的透明覆蓋層。由此，可以把信息顯示層與圖片展示層進(jìn)行完全的分離，即使圖片展示層沒有加載完成，亦可以實(shí)現(xiàn)跳轉(zhuǎn)，增加了信息顯示的轉(zhuǎn)化率，并可以隨意更換圖片，只要鏈接信息不發(fā)生變化，就不用修改代碼，節(jié)省流量，減少維護(hù)成本。而且，鼠標(biāo)進(jìn)入透明覆蓋層時，由于在覆蓋層已綁定了鼠標(biāo)移動事件，就可以利用鼠標(biāo)事件計算用戶的鼠標(biāo)滑動軌跡，并把這些信息發(fā)送到大數(shù)據(jù)收集平臺，從而能夠更多的了解用戶行為，增加信息定位的精準(zhǔn)度。
[0008]在一些實(shí)施方式中，其中對于寬高固定的預(yù)定展示位，生成透明覆蓋層的步驟包括設(shè)定圖片的寬高為展示位的寬高，計算圖片相對于其所在頁面的相對坐標(biāo)，然后根據(jù)相對坐標(biāo)與展示位的寬高生成透明覆蓋層；在透明覆蓋層上定位鏈接區(qū)域包括在透明覆蓋層中根據(jù)形狀信息及鏈接區(qū)域相對于圖片的坐標(biāo)對圖片鏈接區(qū)域進(jìn)行定位，把生成的透明覆蓋層覆蓋到圖片所在頁面的相對位置；
[0009]對于寬高不固定的預(yù)定展示位，由用戶自定義容器的寬高，此時，生成透明覆蓋層的步驟包括計算容器的寬高及圖片相對于其所在頁面的相對坐標(biāo)，根據(jù)相對坐標(biāo)與容器的寬高生成透明覆蓋層；在透明覆蓋層上定位鏈接區(qū)域包括根據(jù)圖片上設(shè)定的鏈接區(qū)域的信息及容器的寬高，將鏈接區(qū)域相對于圖片的坐標(biāo)轉(zhuǎn)化為鏈接區(qū)域的動態(tài)坐標(biāo)信息，在透明覆蓋層上根據(jù)用戶自定義的容器寬高和根據(jù)動態(tài)坐標(biāo)信息插入鏈接區(qū)域，將生成的透明覆蓋層覆蓋到圖片。
[0010]由此，用戶可以自由定義展示位的大小，透明覆蓋層可以根據(jù)具體圖片展示位的大小靈活定位鏈接區(qū)域，減少維護(hù)成本。
[0011]另外，本發(fā)明還公開了一種利用圖片生成鏈接的系統(tǒng)。該系統(tǒng)包括:圖片層單元，設(shè)置為展示信息，提供鏈接區(qū)域；圖片鏈接設(shè)置單元，設(shè)置為獲取圖片，并為圖片設(shè)定鏈接區(qū)域；圖片覆蓋層生成單元，設(shè)置為根據(jù)鏈接區(qū)域的形狀信息及鏈接區(qū)域相對于圖片的坐標(biāo)生成代碼，創(chuàng)建圖片覆蓋層；圖片覆蓋層單元，設(shè)置為覆蓋在圖片層上，為在圖片上設(shè)定的鏈接區(qū)域提供信息地址的鏈接；頁面顯示單元，設(shè)置為供訪問圖片的不同區(qū)域，以跳轉(zhuǎn)至圖片覆蓋層所對應(yīng)的不同區(qū)域上的信息地址的鏈接。
[0012]通過本系統(tǒng)中生成圖片覆蓋層單元放置于圖片層單元上，實(shí)現(xiàn)了在一幅圖中展示多個信息鏈接，并能使信息顯示層和圖片展示層相分離，節(jié)省了服務(wù)器帶寬。
[0013]在一些實(shí)施方式中，其中圖片覆蓋層是信息地址的鏈接，圖片覆蓋層生成單元配置為根據(jù)形狀信息及坐標(biāo)生成鏈接插入代碼，并在圖片所在的頁面插入生成的鏈接插入代碼，從而在圖片的不同區(qū)域形成信息地址的鏈接。由此，可以實(shí)現(xiàn)在一幅圖片上放置多個信息地址鏈接。
[0014]在一些實(shí)施方式中，其中圖片覆蓋層單元是透明覆蓋層單元，圖片覆蓋層生成單元包括透明覆蓋層生成模塊和鏈接區(qū)域定位模塊，透明覆蓋層生成模塊配置為生成用于生成透明覆蓋層的代碼，鏈接區(qū)域定位模塊配置為生成在透明覆蓋層上定位鏈接區(qū)域的定位代碼，在圖片所在的頁面嵌入生成的代碼，從而在圖片上形成包含不同鏈接區(qū)域的透明覆蓋層。由此，可以把信息顯示層與圖片展示層進(jìn)行完全的分離，即使圖片展示層沒有加載完成，亦可以實(shí)現(xiàn)跳轉(zhuǎn)，增加了信息顯示的轉(zhuǎn)化率，并可以隨意更換圖片，只要鏈接信息不發(fā)生變化，就不用修改代碼，節(jié)省流量，減少維護(hù)成本。而且，鼠標(biāo)進(jìn)入透明覆蓋層時，由于在覆蓋層已綁定了鼠標(biāo)移動事件，就可以利用鼠標(biāo)事件計算用戶的鼠標(biāo)滑動軌跡并把這些信息發(fā)送到大數(shù)據(jù)收集平臺，從而能夠更多的了解用戶行為，增加信息定位的精準(zhǔn)度。
[0015]在一些實(shí)施方式中，對于寬高固定的預(yù)定展示位，透明覆蓋層生成模塊的內(nèi)容包括設(shè)定圖片的寬高為展示位的寬高，計算圖片相對于其所在頁面的相對坐標(biāo)，根據(jù)相對坐標(biāo)與廣告位的寬高生成透明覆蓋層；鏈接區(qū)域定位模塊的內(nèi)容包括在透明覆蓋層中根據(jù)形狀信息及鏈接區(qū)域相對于圖片的坐標(biāo)對圖片鏈接區(qū)域進(jìn)行定位，并把生成的透明覆蓋層覆蓋到圖片所在頁面的相對位置；對于寬高不固定的預(yù)定展示位，由用戶自定義容器的寬高，透明覆蓋層生成模塊的內(nèi)容包括計算容器的寬高及圖片相對于其所在頁面的相對坐標(biāo)，根據(jù)相對坐標(biāo)與容器的寬高生成透明覆蓋層；鏈接區(qū)域定位模塊的內(nèi)容包括根據(jù)圖片上設(shè)定的鏈接區(qū)域的信息，將鏈接區(qū)域相對于圖片的坐標(biāo)轉(zhuǎn)化為鏈接區(qū)域的動態(tài)坐標(biāo)信息，根據(jù)容器的寬高和動態(tài)坐標(biāo)信息插入鏈接區(qū)域，并把生成的透明覆蓋層插入圖片。由此，用戶可以自由定義展示位的大小，透明覆蓋層可以根據(jù)具體圖片展示位的大小靈活定位鏈接區(qū)域，減少維護(hù)成本。
[0016]通過本發(fā)明提供的方法和系統(tǒng)，可以實(shí)現(xiàn)廣告與展示的分離，增加了廣告轉(zhuǎn)化率，節(jié)省了服務(wù)器帶寬，減少了維護(hù)廣告鏈接的成本。
【附圖說明】
[0017]圖1為本發(fā)明一實(shí)施方式的利用圖片生成鏈接的方法流程示意圖；
[0018]圖2為本發(fā)明另一實(shí)施方式的利用圖片生成鏈接的方法流程示意圖；
[0019]圖3為本發(fā)明一實(shí)施方式的利用圖片生成鏈接的廣告位結(jié)構(gòu)示意圖；
[0020]圖4為圖1所示方式中生成廣告代碼的過程示意圖；
[0021]圖5為圖2所示方式中生成透明覆蓋層的過程示意圖；
[0022]圖6為圖2所示方式中生成透明覆蓋層的過程示意圖。
【具體實(shí)施方式】
[0023]下面結(jié)合附圖對本發(fā)明作進(jìn)一步詳細(xì)的說明。
[0024]圖1示意性地顯示了根據(jù)本發(fā)明的一種實(shí)施方式的利用圖片生成鏈接以訪問信息顯示區(qū)的方法。在所示的實(shí)施例中，以廣告位作為信息顯示區(qū)的例子。其中，圖1(a)是形成廣告位的過程示意圖，圖1(b)是用戶訪問廣告位的過程示意圖。
[0025]如圖1 (a)所示，創(chuàng)建信息展示位(廣告位)的過程如下:
[0026