image nosave with mooTools 1.11

a lot of photographers use FLASH for another good reason: it is impossible to save the images contained in the FLASH.

as an alternative, handgestrickt had the idea to place a completely transparent layer over every image with the rel-attribute of "nosave" or a nosave-attribute set to "nosave". this works in every modern browser, with one limitation in Opera: the images have to have a width and height. otherwise Opera (or mooTools) cannot measure the width and height of the image.

requires: mooTools 1.11 (Window.DomReady, Element.Dimensions)

here is the code:

var nosave = new Class({
    initialize: function() {
        window.addEvent('domready',this.prepare.bindAsEventListener(this));
        return true;
    },

    prepare: function() {
        var imgs = $$('img');
        for(var a=0;a<imgs.length;a++) {
            if(
                imgs[a].getProperty('nosave') ||
                (imgs[a].getProperty('rel') && imgs[a].getProperty('rel').match(/(?:^|;)nosave(?:$|;)/i))
            ) {
                imgs[a].setProperty('nosave','nosave');
                var coords = imgs[a].getCoordinates();
                var overlay = new Element('div',{});
                var zindex = 1;
                if($type(imgs[a].style.zIndex)) zindex = (imgs[a].style.zIndex+1);
                overlay.setStyles({
                    'position': 'absolute',
                    'background-color': '#FF0000',
                    'top': coords.top+'px',
                    'left': coords.left+'px',
                    'width': coords.width+'px',
                    'height': coords.height+'px',
                    'z-index': zindex
                });
                var parent = imgs[a];
                while($type(parent.getParent())) {
                    parent = parent.getParent();
                    if(parent.tagName == 'A') {
                        overlay.setStyle('cursor','pointer');
                        eval('overlay.addEvent("click",function(e) { if(!new Event(e).rightClick) { window.location.href = "'+parent.href+'"; }; });');
                        break;
                    };
                };
                try { overlay.style.opacity = 0; } catch(ex) { };
                try { overlay.style['moz-opacity'] = 0; } catch(ex) { };
                try { overlay.style.filter = 'alpha(opacity:0)'; } catch(ex) { };
                overlay.injectBefore(imgs[a]);
            };
        };
        return true;
    }
});

<script language="JavaScript" type="text/javascript">
    var my_nosave = new nosave();
</script>

examples:

<img src="foo.jpg" rel="nosave" />
<img src="foo2.jpg nosave="nosave" />

for the "smartasses": handgestrickt is totally aware of the fact, that deactivating Javascript, looking into the browser cache or making screenshots cannot prevent the images from being saved. but for 90% of the internet users, this should be a good barrier. by the way: you can also make screenshots of FLASH-movies...