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:

  • Prevents right-click “Save Image As”.
  • Prevents dragging an image to the desktop.
  • Prevents right-click “Save Background As”.
  • Prevents right-click “View Background Image”

All I needed was a small MooTools script.\


//protector class

var dwProtector = new Class({



Implements: [Options],



options: {

image: ‘blank.gif’,

elements: $$(‘img’),

zIndex: 10



initialize: function(options) {

//set options


//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’: + ‘px’,

‘position’: ‘absolute’






Leave a comment