网站的图片保护是一个热门话题，为什么呢？你想想如果您辛辛苦苦花了两个小时设计出来个设计，你会希望它被别人无情的PS，修改做别人的东西吗？当然是被允许的，这就是dwProtector产生的原因。

dwProtector是基于mootools开发的插件。那么，dwProtector的功能强度有多大呢，看下面列表：

• 守护右键“（图片）另存为”（”Save Image As”）
• 守护右键“背景图片另存为”（”Save Background As”）
• 守护拖拽图片到桌面
• 甚至是守护右键

在线功能演示：http://davidwalsh.name/dw-content/image-protector.php
里面的图片很凶猛哦…

核心代码：

//protector class
var dwProtector = new Class({

	//implements
	Implements: [Options],

	//options
	options: {
		image: 'blank.gif',
		elements: $$('img'),
		zIndex: 10
	},

	//initialization
	initialize: function(options) {
		//set options
		this.setOptions(options);

		//make it happen
		this.protect();
	},

	//a method that does whatever you want
	protect: function() {
		//for each image that needs be protected...
		this.options.elements.each(function(el) {
			//get the element's position, width, and height
			var size = el.getCoordinates();
			//create the protector
			var p = new Element('img', {
				src: this.options.image,
				width: size.width,
				height: size.height,
				styles: {
					'z-index': this.options.zIndex,
					'left': size.left + 'px',
					'top': size.top + 'px',
					'position': 'absolute'
				}
			}).inject($(document.body),'top');
		},this);

	}
});

通过上面的代码可以发现，用户虽然可以上面的方法保存图片，不过下载下来的图片只是我们函数里面替换掉的blank.gif。

使用方法：
1. 下载mootools和dwProtector以及空的替换图片blank.gif，下载后放置在网站合适的位置。
2. 把下面代码插入到全局的头部文件中(）：

3.在你的图片加入 class=”protect”（可以通过步骤2修改保护图片标记），如：

作者在结尾声明，对于查看网页源文件或其他方法还是可以很轻松的获得图片的地址，而且我还尝试用选中图片，复制，粘贴在富文本编辑器下面也是可以显示的…不过作者目前还在想办法解决这方面的问题，让我们一起为作者加油吧！