保護圖片不被盜拷

此法使用 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>

• 程式用法：

  <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>
  

• 執行結果：
  
  

  Copyright 2008, by ant2legs, All Rights Reserved.