David Walsh Blog

MooTools 1.2 Image Protector: dwProtector

Image protection is a hot topic on the net these days, and why shouldn’t it be? If you spent two hours designing an awesome graphic, would you want it ripped of in matter of seconds? Hell no! That’s why I’ve created an image protector class to help designers and artists protect their images. Here’s how it helps:

All I needed was a small MooTools script.

The MooTools JavaScript Class

//protector class
var dwProtector = new Class({

	Implements: [Options],

	options: {
		image: 'blank.gif',
		elements: 'img',
		zIndex: 10
	initialize: function(options) {
		//set options
		this.options.elements = $$(this.options.elements);
		//make it happen
	//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'

The class is so simple it has only one working method! The protect() method places the “blank” image over the image you need to protect.

The Usage

window.addEvent('domready', function() {
	var protector = new dwProtector({
		image: '/blank.gif',
		elements: $$('.protect')

Not a whole lot in the way of usage. Simply instantiate the class and pass in the image path and the elements to protect. Download the blank.gif image here.

One note I’d like to share. You could use a DIV element instead of an image, but using an image as the overlaying element allows you to dupe the user into thinking that they actually are saving an image.

This isn’t meant to be THEE image protector. Print-screen or a quick view-source will get the user the image. View source though…maybe I can find a solution to make that harder….Anyways, use as you need to.