網站架設
如果有仔細注意的話,會發現筆者也把原本圖片 alt 屬性也加在我們的 blank.gif 上面,所以當瀏覽者把滑鼠移到 blank.gif 上也能呈現原圖的 alt 屬性的內容。沒問題的話,就讓我們來看結果囉~
上方的是沒加偽浮水印的圖片,而下方的則是加上浮水印及版權宣佈圖片(右下角)後的效果。列位瀏覽時能趁便把滑鼠移到圖片上面,或者是點著圖片按右鍵另存看抓到的是那個檔案。
記得筆者曾經寫過一篇「用 JavaScript 來做偽浮水印」,那時是用 JavaScript 來寫的,得顛末計算才能把版權宣告的圖片放在右下角。而今筆者把整個結果用 jQuery 來改寫,並把原本要計較的版權宣告圖片位置換成 background-position 的方式來節制,這樣想放那就只要設定一下就行了。
我們的 HTML 就是很純真的圖片而已:
檢視原始碼 HTML
接著著手寫程式之前,先來看一下筆者用來做偽浮水印的手法:
一樣是有一張 1px * 1px 的 blank.gif 圖片,我們需要把它的寬高設成跟原圖一樣,並把位置移到原圖上面。接著再產生一個 Div 區塊,一樣是寬高及位置都跟原圖一樣,但重點是它的 background-image 就是我們要用來當版權宣告的圖片,而圖片位置只要靠著 background-position 就可以控制了。
所以需要產生一個 Img 跟 Div 區塊,讓我們來看 jQuery 的部分:
檢視原始碼 JavaScript
文章標籤
全站熱搜