這幾天有網友問到背景圖片的問題，他要的是一張圖片永遠固定在某一區塊，就算捲軸拖拉也一樣在那邊，醬的功能用CSS就能做出來了，但是卻讓我想到另一個idea。有些網站會在自己的圖片或是照片上加上圖片版權為XXX所有的字樣，有點像是新台幣紙鈔上面的浮水印一樣，醬一來可以防止人偷圖(抓了圖還要修字...)，二來就算被盜連了，至少上面有說是盜自那邊的網站。不過若是要一張一張的加浮水印的話，又有點浪漫時間的感覺，所以我就想到一種偽浮水印的方法。
什麼是偽浮水印？顧名思義就是假的浮水印啦~讓人以為是真的有浮水印，但其實那只是個幌子。假設有一張照片要來偽裝，我們要先準備一張版權字樣的透明圖及一張大小1x1的透明圖，接著就是把這三張圖合成一張。各位聽到這邊各位應該都還是不了解我在說什麼吧！直接看下面的圖解好了。
經過偽裝後
先把版權宣告字樣的透明圖移到照片的右下角，再來就是把1x1的透明圖放大跟要被偽裝的照片一樣大小後，把透明圖疊在照片上面，因為是透明圖的關係，所以我們還是可以看到照片跟版權宣告的字樣，且透明圖是在最上層，若有人要複製照片的話，只會複製到透明圖，無法點選到真正的照片，醬就能達到偽裝的功能了。不過若是看原始碼的話~就會破功了，這只能用來騙騙不懂的人！
了解完原理後就開始來動手做做看，先看Body部份：
這邊我放了六張Xuite的logo圖，且在某三張圖的Img中加入了一個屬性-ispic，這是要用來區分那些圖是要加浮水印用的，若為true時就是表示要加浮水印；若為false或是沒有此屬性則表示不用加。其中的border="1"是為了方便看出圖的範圍用的，實際情況下可以拿掉。
再來換看JavaScript的部份：
在網頁載入完後會執行init()函式來做偽裝的工作。一開始我宣告了兩個Image物件出來，一個用來存放版權字樣圖片用，另一個用來存放1x1透明圖用。接著就是先找出網頁中圖片的數量，再用迴圈一一來判斷該圖片是否要偽裝，若為true的話，就開始取得該圖片的offsetTop、offsetLeft、width及height並算出myLogo的top及left值跟myBack的top、left、width及height值。
若不懂這些值是怎樣來的可以先看下圖的說明：
正常情況之下可以利用DOM物件來取得物件style屬性中所設定的top及left的值,以達到取得物件座標之目的,若是未設定style屬性中的top及left值的物件的話,此時就需要利用offsetTop及offsetLeft來取得對應的座標值。
所以版權字樣圖片的top值就是要偽裝照片的offsetTop+(要偽裝照片的height-版權字樣的height，left 值就是要偽裝照片的offsetLeft+(要偽裝照片的width-版權字樣的width)；那1x1的透明圖的寬高就是要偽裝照片的寬高，top和left就是要偽裝照片的offsetTop跟offsetLeft。
接著就是產生一個Img物件並加到網頁中。1x1透明圖中的border=2是為了方便看出它是透明圖用的，實際情況下一樣可以拿掉。
這樣效果的語法並不難，只是座標關係要對就好，至於實不實用就看各位囉。
範例瀏覽：
http://abgne.myweb.hinet...0010.html以上內容於2005/10/03發表在小弟的Blog裡
http://blog.xuite.net/abgne/diary1/4084719
