分类: H5/JS/CSS

为图片添加水印效果

[ 2004-09-16 05:26:42 | 作者: admin ]
字号: 大 | 中 | 小
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
<title>无标题文档</title>
<script>
   //取得元素（图像）的绝对位置
   function getDim(el)
   {
     for (var lx=0,ly=0; el!=null; lx+=el.offsetLeft,ly+=el.offsetTop,el=el.offsetParent);
     return {x:lx,y:ly}
   }
   //创建遮挡层
   function createLayer(el)
   {
     myImgDim = getDim(el);
  
     document.writeln("<div id='Layer1' style='position:absolute; z-index:1; left: "+myImgDim.x+"px; top: "+myImgDim.y+"px;'>");
     document.writeln("水印");
     document.writeln("</div>");
   }
   //浏览器窗口大小改变时刷新页面
   window.onresize=function()
   {
     location.reload();
   }
</script>
<link href="j.css" rel="stylesheet" type="text/css">
</head>

<body>
<br>
<br>
<table width="407" height="268" align="center">
     <tr>
         <td align="center"><span id=MySpan><img src="http://www.wodao.net/index.gif" width="150" height="78" id=MyImage></span><span id=MySpan><img src="http://www.wodao.net/index.gif" width="150" height="78" id=MyImage2></span></td>
     </tr></table>

  


<span id=MySpan><img src="http://www.wodao.net/index.gif" width="150" height="78" id=MyImage3></span><br>
<span id=MySpan><img src="http://www.wodao.net/index.gif" width="150" height="78" id=MyImage4></span>
<script>
   createLayer(document.images.MyImage2);
   createLayer(document.images.MyImage3);
   createLayer(document.images.MyImage4);
</script>
</body>
</html>
评论Feed 评论Feed: http://blog.xg98.com/feed.asp?q=comment&id=21

这篇日志没有评论。

此日志不可发表评论。