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

原创 2003年11月13日 00:09:00

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


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

Android界面布局文字水印

一、需求分析 今天一个朋友说要解决一个需求,在每个布局中加上水印效果,如下图:   从图中,我们看到在内容布局中很明显有文字水印效果,如何实现这种效果呢: (1)水印文字有旋转 (2)水印效...
  • u013718120
  • u013718120
  • 2017年06月29日 17:22
  • 1761

JavaScript给网页添加水印

设计前景 web页面需要提供打印功能,而且需要控制打印次数。因此给原网页添加水印,并且添加按钮去控制打印功能。 设计思路 1、给原网页进行添加水印,进行控制,避免使用浏览器的打印功能。 2、添加打印区...
  • wenxuechaozhe
  • wenxuechaozhe
  • 2016年07月16日 15:00
  • 19911

Java 实现图片水印之水印图片(SpringMVC + Jsp)

图片水印不仅水印文字还可以是图片,本次实现图片水印之图片水印,以后有需要可以写个代码批量处理自己的图片了。 大家先看效果图代码编写1.导入相关架包2.配置XML文件 web.xml ...
  • wenteryan
  • wenteryan
  • 2016年05月10日 13:17
  • 2043

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

http://blog.csdn.net/danky/article/details/771213 程序本来源于http://dev.csdn.net/develop/article/22/...
  • mituan1234567
  • mituan1234567
  • 2014年08月13日 10:16
  • 432

JS用层实现为图片添加水印效果

  • 2016年09月02日 11:50
  • 1KB
  • 下载

js网页添加水印

////////////////////////////////////////////////// //改编摘自:http://www.cnblogs.com/daixinyu/p/6715398....
  • laigezao
  • laigezao
  • 2017年06月30日 16:00
  • 939

JavaScript给网页添加水印

设计前景 web页面需要提供打印功能,而且需要控制打印次数。因此给原网页添加水印,并且添加按钮去控制打印功能。 设计思路 1、给原网页进行添加水印,进行控制,避免使用浏览器的打印功能。 2、添加打印区...
  • wenxuechaozhe
  • wenxuechaozhe
  • 2016年07月16日 15:00
  • 19911

视频特效制作:如何给视频添加边框、水印、动画以及3D效果

from : http://www.cocoachina.com/ios/20141208/10542.html 本文内容来自raywenderlich的这篇文章的翻译:AVFoun...
  • xyt243135803
  • xyt243135803
  • 2014年12月09日 23:11
  • 677

一起学android之给图片添加水印效果(33)

原图: 效果图: 参考代码如下: public class MainActivity extends Activity { private Button btn_start;...
  • GULINHAI12
  • GULINHAI12
  • 2015年04月23日 13:19
  • 5360

视频特效制作:如何给视频添加边框、水印、动画以及3D效果

本文内容来自raywenderlich的这篇文章的翻译:AVFoundation Tutorial: Adding Overlays and Animations to Videos 这...
  • sharpyl
  • sharpyl
  • 2017年03月31日 21:31
  • 1102
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:用层实现为网页中的图添加水印的效果
举报原因:
原因补充:

(最多只允许输入30个字)