为网页中的图片添加水印的效果

　　程序本来源于http://dev.csdn.net/develop/article/22/22096.shtm中lovered所写的程序，我把其中的一些我觉得不太好的加以了改进并且增加一些功能形成了该版本，使该程序有更高的可用性，其中可以较好地把水印依附在以以下定位方式定位的图片上：
　　►表格来定位
　　►层来定位
　　►默认的相对定位
以其它方式定位的图片未曾经过测试！

程序且有的特性有：

 *支持根据窗口大小被改变时修正水印在网页上的位置。
 *支持图片被拖曳时修正水印在网页上的位置。
 *提供效率相对较高的reviseWatermark()函数给外部程序用于修正一个图片上的水印。
 *提供效率相对较低但使用简便的reviseWatermark_handy()函数给外部程序用于修正一个图片上的水印。
 *可以设置水印在图片上的四个位置（左上角、右上角、右下角左下角）。

watermark_to_img_V1.1.js文件代码如下：
/***********

****项目名称：用层实现为网页中的图添加水印的效果
****E-mail：laodaqiu@21cn.com
****作者：laodaqiu
****项目描述：以一位网友在CSDN发表的一篇名为：“用层实现为网页中的图添加水印的效果”的帖子为基础，把该网友所制作的水印效果加以改进，把以该图片生成的水印与该图片进行邦定，使图片对应的水印会在浏览器窗口大小改变时跟随该图片的移动。

______________________________________
****版本：V1.0测试版 for JavaScript1.2
****开始时间：2005-7-21
****完成时间：2005-7-21
****测试平台：WinXPsp1 + IE6.0sp1
****版本特性：
 *支持根据窗口大小被改变时修正水印在网页上的位置。

______________________________________
****版本：V1.0正式版 for JavaScript1.2
****开始时间：2005-7-24
****完成时间：2005-7-24
****测试平台：WinXPsp1 + IE6.0sp1
****版本特性：
 *增加支持图片被拖曳时修正水印在网页上的位置。
 *提供效率相对较高的reviseWatermark()函数给外部程序用于修正一个图片上的水印。
 *提供效率相对较低但使用简便的reviseWatermark_handy()函数给外部程序用于修正一个图片上的水印。

______________________________________
****版本：V1.1正式版 for JavaScript1.2
****开始时间：2005-7-26
****完成时间：2005-7-26
****测试平台：WinXPsp1 + IE6.0sp1
****版本特性：
 *增加可以设置水印在图片上的四个位置（左上角、右上角、右下角左下角）的支持
 *修正获取图片的z-index值时的Bug

***********/

/****
类名：Watermark
建立时间：2005-7-21
最后修改：2005-7-26
类型说明：为图片创建与之对应的水印，作为图片与水印关联的桥梁
参数说明：
 imgElement：必须，没有默认值，一个需要删除水印的HTML图片元素的参考
 imgDim：必须，没有默认值，一个以getDim生成的对象的参考
****/
function Watermark(imgElement, imgDim)
{
 this.imgElement = imgElement;        //与水印邦定的图片对象的参考
 this.preImgX = imgDim.x;         //图片移动前的x坐标
 this.preImgY = imgDim.y;         //图片移动前的y坐标
 this.watermarkElement;          //输出后的水印对象的参考
 this.id = imgElement.id + "Watermark";      //水印图片的id
 this.x = imgDim.x;           //水印左上角的x坐标
 this.y = imgDim.y;           //水印左上角的y坐标
 this.zIndex = imgDim.z;          //水印的z-index值
}
Watermark.prototype.length = 0;         //创建水印对象的总数
Watermark.prototype.img = "images/002.gif";      //所有水印共同使用的水印图片（也可以设置独自的图片）
Watermark.prototype.opacity = 50;        //水印的不透明度
Watermark.prototype.width;          //水印的宽（创建水印后可获取或自定义）
Watermark.prototype.height;          //水印的高（创建水印后可获取或自定义）
Watermark.prototype.locate = "rightBottom";      //水印的位置:leftTop/rightTop/leftBottom/rightBottom
Watermark.prototype.getHTML = function()      //返回对应的水印层的HTML代码
{
 return "<img src=" + this.img + " id='" + this.id + "' style='position:absolute; z-index:" + this.zIndex + "; left: " + this.x + "px; top: " + this.y + "px;filter:progid:DXImageTransform.Microsoft.Alpha(style=0,opacity=" + this.opacity + ")'>";
}
Watermark.prototype.setWatermarkElement = function()   //设定及返回水印对象的参考
{
 return eval("this.watermarkElement = document.all." + this.id + ";");
}
Watermark.prototype.setSize = function(width, height)   //设定水印的宽和高
{
 Watermark.prototype.width = width;
 Watermark.prototype.height = height;
}

var watermarkObjs = new Array();        //存放水印对象的数组

/****
函数名称：获取元素的位置（getDim）
建立时间：2005-7-21
最后修改：2005-7-26
功能描述：获取一个HTML元素在页面的绝对位置或相对位置
参数说明：
 element：必须，没有默认值，一个HTML元素的参考
****/
function getDim(element)
{
 for (var leftX=0,leftY=0,zIndex=0; element!=null; )
 {
  leftX += element.offsetLeft;
  leftY += element.offsetTop;
  if (element.tagName != "BODY")
   zIndex = element.style.zIndex;      //水印的z-index值

  element = element.offsetParent;
 }

 return {x:leftX, y:leftY, z:zIndex}       //返回对象的x、y坐标和z-index层数
}

/****
函数名称：创建水印（createWatermark）
建立时间：2005-7-21
最后修改：2005-7-26
功能描述：根据图片在网页上的位置以及指定图片上的位置创建图片的水印的对象及水印的HTML元素
参数说明：
 imgElement：必须，没有默认值，一个需要删除水印的HTML图片元素的参考
 locate：可选，默认值：rightBottom，取值范围："leftTop"、"rightTop"、"leftBottom"、"rightBottom"或1－4表示
****/
function createWatermark(imgElement, locate)
{
 if ( !imgElement )           //如果没有图片不能创建水印
 {
  return null;
 }

 var index = watermarkObjs.length;       //定义新水印对象的数组索引
 var imgDim = getDim(imgElement);
 watermarkObjs[index] = new Watermark(imgElement, imgDim); //创建新水印对象到数组中
 document.writeln( watermarkObjs[index].getHTML() );   //输出水印层的HTML元素
 var wmElement = watermarkObjs[index].setWatermarkElement(); //设定水印对象的参考
 watermarkObjs[index].setSize(wmElement.width, wmElement.height);
 if ( (locate == "leftTop") || (locate == 1) ||
   (locate == "rightTop" ) || (locate == 2) ||
   (locate == "leftBottom" ) || (locate == 3) ||
   (locate == "rightBottom" ) || (locate == 4) )
 {
  watermarkObjs[index].locate = locate;     //设定水印的位置
 }
 reviseWatermark(watermarkObjs[index]);
 ++Watermark.prototype.length;

 return watermarkObjs[index];        //返回该水印对象的指针
}

/****
函数名称：修正水印（reviseWatermark）
建立时间：2005-7-24
最后修改：2005-7-26
功能描述：当你把本程序应用到可以被拖曳的图片上时，本程序提供了这个函数，你的程序可以调用这个函数来使水印与图片的位置一致，该函数你的程序传递一个watermark对象（即以你的程序中的图片所创建的水印对象）作为参数，你的程序不能传递你的图片作为参数，因为你的图片并不知道那个水印图片是与他对应的，只有利用该程序创建的watermark对象才能找到与你的图片相应的水印。你可以用以下的方法获取你的图片所创建的watermark对象和使用该函数：
var objName = createWatermark(document.images.imgID); //以imgID这个图片创建一个watermark对象
reviseWatermark(objName);        //调整水印与图片的位置一致
参数说明：
 watermarkObj：必须，没有默认值，一个本程序创建的Watermark的对象
****/
function reviseWatermark(watermarkObj)
{
 var imgDim = getDim(watermarkObj.imgElement);    //重新取得图片的位置

 with (watermarkObj)           //调整水印对象的属性值
 {
  preImgX = imgDim.x;
  preImgY = imgDim.y;
  switch (locate)
  {
  case 1:
  case "leftTop":
   x = imgDim.x;
   y = imgDim.y;
   break;
  case 2:
  case "rightTop":
   x = imgDim.x + (imgElement.width - width);
   y = imgDim.y;
   break;
  case 3:
  case "leftBottom":
   x = imgDim.x;
   y = imgDim.y + (imgElement.height - height);
   break;
  case 4:
  case "rightBottom":
   x = imgDim.x + (imgElement.width - width);
   y = imgDim.y + (imgElement.height - height);
   break;
  }
  zIndex = imgDim.z;
 }
 with (watermarkObj.watermarkElement.style)     //调整水印在网页上的位置
 {
  left = watermarkObj.x;
  top = watermarkObj.y;
  zIndex = watermarkObj.zIndex;
 }

 return watermarkObj;          //返回该水印对象的指针
}

/****
函数名称：修正水印－简便版（reviseWatermark_handy）
建立时间：2005-7-24
最后修改：2005-7-24
功能描述：该函数作为上面reviseWatermark()这个函数的简便使用版本，该函数主要以使用简便的目的提供一个外部程序对水印进行修正的接口，只要将当前的图片传递给该函数即可修正该图片上的水印，克服了需要生成动态的watermark对象的环境，但缺点是会令程序降低一定的效率，所以不建议在需要生成大量的水印的情况下使用。　注：该函数需要调用reviseWatermark()函数
参数说明：
 imgElement：必须，没有默认值，一个需要删除水印的HTML图片元素的参考
****/
function reviseWatermark_handy(imgElement)
{
 for (var idx=0; idx<watermarkObjs.length; ++idx)   //在watermark的对象数组中查找与图片对应的对象
 {
  if (watermarkObjs[idx].imgElement == imgElement)
  {
   return reviseWatermark(watermarkObjs[idx]);   //把查找到的对象传给reviseWatermark()进行修正
  }
 }

 return null;            //查找不到相应的对象返回空
}

/****
函数名称：检查水印（checkWatermark）
建立时间：2005-7-24
最后修改：2005-7-28
功能描述：检查页面中的本程序创建的所有水印对象是否与图片对应
参数说明：没有
****/
function checkWatermark()
{
 var imgDim;
 for (var idx=0; idx<watermarkObjs.length; ++idx)
 {
  imgDim = getDim(watermarkObjs[idx].imgElement);   //获取图片当前的位置
  if ( (imgDim.x != watermarkObjs[idx].preImgX) ||
    (imgDim.y != watermarkObjs[idx].preImgY) ||
    (imgDim.z != watermarkObjs[idx].zIndex) )
  {
   reviseWatermark(watermarkObjs[idx]);    //修正该水印对象的位置
  }
 }

 return true;
}

window.onresize = checkWatermark;

测试网页代码如下：
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title> 为网页中的图片添加水印的效果 </title>
<meta name="Generator" content="EditPlus">
<meta name="Author" content="">
<meta name="Keywords" content="">
<meta name="Description" content="">
<script src="watermark_to_img.js" language="JavaScript"></script>
</head>

<body>
<p>这个程序可以处理图片在网页中比较复杂的定位和多个图片的交错重叠关系，使水印和图片充分地结合在一起！而且可以设定水印在图片上的位置</p>
<table border="1" bgcolor="red">
<tr>
 <td width="5%"></td>
 <td>这个图片是用表格来定位：<br>
  <img src="images/saying1.jpg" width="450" height="313" border="0" alt="" οnlοad="createWatermark(this)">
 </td>
 <td width="5%"></td>
</tr>
</table>
<p>这个图片在网页中是相对定位：<br>
<img src="images/saying2.jpg" width="462" height="308" border="0" alt="" οnlοad="createWatermark(this,'leftTop')">

<div style="position:absolute; z-index:1; left:400px; top:180px; border: thick double yellow; background-color:yellow"  align="right">这个图片是用层来定位的：<br>
 <img src="images/saying3.jpg" width="426" height="302" border="0" alt="" οnlοad="createWatermark(this, 'leftBottom')">
</div>
</body>
</html>