jQuery Plugin – Protect Images

Protecting images for a website is a cat and mouse game. Trying to elude those who wish to take your images, instead of peacefully view them is difficult, but you can try to be ahead using a few techiques.

1. Use .htaccess rules.

2. Use an image-blocking javascript solution

3. Overlay an image in the same image tag

4. Prevent printing / projection etc. using css rules.

–> @media print,projection { .trans { background:url(’copyright.png’); }  }

–> @media print,projection { img { background:url(’copyright.png’);} }

Advantages of the Javascript Overlay vs the Image Overlay

Automatically is applied upon pageload, on all images, no need to manually change the images on the page.

The javascript overlay follows:

(function($) {
  $.fn.mask = function(){
  	this.each(function(){
  		var img = {
  			src: $(this).attr('src'),
  			bg: 'url('+this.src+')',
  			style: $(this).attr('style'),
  			width: $(this).width(),
  			height: $(this).height(),
  			alt:   $(this).attr('alt')
  		};
  		var div = $(this).wrap('<div>').parent().addClass('img');
  		div.attr({style: img.style, title: img.alt}).css({backgroundImage:img.bg, width: img.width, height: img.height});
                div.bind('contextmenu',function(){return false;});
  		div.find('img').remove();
  	});
  };
})(jQuery);

Which does the overlaying for you, as a dropin plugin.

Usage:

$(window).bind('load',function(){$('img').mask();});

Demo Page.