用层实现为网页中的图添加水印的效果

王朝html/css/js·作者佚名  2006-01-08
窄屏简体版  字體: |||超大  

首先获得网页元素的绝对位置后在相应的位置创建一个遮挡层,可实现一个水印样式。该例可用于为图片加版权,或隐藏图片的下载地址等。缺点是改变浏览器大小时有页面有闪烁。

<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("<img src=logo.gif width=38 height=17>");

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="image/logo1.gif" width="150" height="78" id=MyImage></span><span id=MySpan><img src="image/logo1.gif" width="150" height="78" id=MyImage2></span></td>

</tr></table>

<span id=MySpan><img src="image/logo1.gif" width="150" height="78" id=MyImage3></span><br>

<span id=MySpan><img src="image/logo1.gif" width="150" height="78" id=MyImage4></span>

<script>

createLayer(document.images.MyImage);

createLayer(document.images.MyImage2);

createLayer(document.images.MyImage3);

createLayer(document.images.MyImage4);

</script>

</body>

</html>

 
 
 
免责声明:本文为网络用户发布,其观点仅代表作者个人观点,与本站无关,本站仅提供信息存储服务。文中陈述内容未经本站证实,其真实性、完整性、及时性本站不作任何保证或承诺,请读者仅作参考,并请自行核实相关内容。
 
 
© 2005- 王朝網路 版權所有  導航