保護圖片不被盜拷

此法使用 DIV 區塊蓋住被保護的作者圖片。DIV 區塊的長寬設成與作者圖片相同，其中放有著作權保護文字（copyright protection）。此法用到以下特徵與方法。

1. IMG：用來展現一張圖像。
2. DIV：用來蓋住圖片。
3. position:relative：設定圖片佈局的方式。
4. top：用來將 DIV 區塊與圖片重疊放在一起。
5. z-index：設定重疊的圖片與 DIV 區塊展現時的上下層次。
6. onload：下載圖片時，會啟動此事件操控器。
7. onmouseover：滑鼠移入元素時，會啟動此操控器。
8. onmouseout：滑鼠移出元素時，會啟動此操控器。
9. style.zIndex：用來變更圖片的層次。
10. setZ(o, level)：此為自訂函式，用來設定重疊元素的層次。參數 o 是元素物件，level 是要設定的層次。

此法利用 onmouseout, onmouseover 兩個操控器，動態變更 z-index；當滑鼠移入作者圖片時，會出現保護文字。在圖片上點擊滑鼠右鍵，無法將作者圖片存檔。如果瀏覽器的 javascript 被關閉，則只能顯示保護文字。但是必須強調一點，此法不能達成百分之百保護。基本上，在網路傳輸的資料，不可能作到百分之百保護。另外有兩個版本是純用 CSS 的 OPACITY 與 Z-INDEX 作的保護罩，這兩個方法的缺點是 IE6 不支援 opacity 與 :hover。

由於圖片與區塊的間距會隨 font 變化；下例中，font-size:0px 與 line-height:0 是為了確保圖片與區塊的上下間距固定，以便用 top 調整兩者重疊。line-height 是被 Firefox, Safari, Chrome 所需要。如果是左右間距，則還受到 letter-spacing, word-spacing 的影響。實測時，左右間距在不同瀏覽器無法調成一致。

DIV 區塊一定要設背景色，如果不設背景色，預設值是 transparent；這在 IE6 點擊滑鼠右鍵依然可以將作者圖片存檔。 <style type='text/css'> .crp {font-size:0px; line-height:0; height:202px; overflow:hidden; } .crp IMG {position:relative; padding:0px; margin:0px; border:none; outline:none; } .crp DIV {position:relative; top:-200px; width:200px; height:200px; background:red; color:black; font-size:14px; line-height:1.2; } </style> <div class=crp> <img onload='setZ(this, 2)' onmouseover='setZ(this, -2)' onmouseout='setZ(this, 2)' src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjpYA549yz9MS8WE3TorQMGpoPgrqOUQYQzr0UHO5GnBgWzJjbXbZ-07pqxAUoNnsZMMHDidRLuHtdnAO9p3Iy26qtMYxQiyOqnPRzWKQfswwUOSPvfJ9sz1ideHxDOcjgbBM32jfo6ixI/s200/shape.jpg" /> <br /> <div onmouseover='setZ(this, 4)' onmouseout='setZ(this, 0)' > Copyright 2008, by ant2legs, All Rights Reserved. </div> </div> <script type='text/javascript'> function setZ( o, level ) { o.style.zIndex=level; } </script>