Protecting an Image from downloading by Right-Click

Question

EDIT: In response to many comments I do know that there is no sure fire way to fully protect an image from being downloaded. This method is to prevent the casual user from downloading by simple right click. The best way probably would be simply copyrighting your images and if you are very concerned would be using a service like Digimarc to digitally watermark your image. Now to the question:

I came across a site that is using a GIF overlay over their actual image so it protects the image from users right clicking and downloading the image (though you can still grab the actual image from within the code). The code they use to do this is:

<div><img src="-Transparent GIF File-" alt="" width="530" height="558" 
border="0" original="-Actual Image Displayed-" /></div>

My question is the original tag is not a real tag and is used and translated by Javascript of some sort. I would like to replicate this on my site. Can someone help me find this script?

Answer 1

This is pointless. If a browser displays an image, it can be taken. Any attempt to prevent that is merely site overhead that can very easily be circumvented.

You're best protection is to put a copyright notice on the images themselves.

In any event, if you really want to swap the original attribute you can...

$(function() {
var o = $('img').attr('original');
$('img').attr('src', o);
});

Demo here

but... that doesn't do anything to prevent the user selecting and saving the image tied tot eh original attribute.

Answer 2

A simpler solution for what you're trying to accomplish is to add all of these attributes to the img tag:

ondrag="return false"
ondragstart="return false"
oncontextmenu="return false"
galleryimg="no"
onmousedown="return false"

Also, to optionally make the image print smaller, add this to the img tag:

class="imgPrint"

And include this related CSS:

@media print
{
    .imgPrint
    {
        width: 40%;
    }
}

Answer 3

You can do this without original tag also :

http://rainbow.arch.scriptmania.com/scripts/no_right_click.html

see this link.

I think this is what u want, this link may help you.

Answer 4

This is my implementation for a light protection of images.

It will create a transparent cover DOM element over the image (or text). If you disable javascript the image will be hidden and if you remove the cover the image will be hidden on mouse over. Also right click on images is disabled.

You can always printscreen, grab from the downloaded resources, etc, etc. This will only filter the most basic ways of download. But for a more convenient protection you have to hide the image path and render to a canvas object.

You can improve this, but there is always a method to get the image.

Tested on major browsers and working!

HTML

<div class="covered">
    <img src="image.jpg" alt="" />
</div>

JAVASCRIPT + JQUERY

$('.covered').each( function () {

    $(this).append('<cover></cover>');
    $(this).mousedown(function(e){ 
        if( e.button == 2 ) { 
            e.preventDefault();

          return false; 
        } 
        return true;
    });

    $('img', this).css('display', 'block');

    $(this).hover(function(){
        var el = $('cover', this);
        if (el.length <= 0) { 
            $(this).html('');
        }
    });
});

CSS

cover
{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
}

.covered
{
    position: relative;
}

.covered img
{
    display: none;
}