How to use

JS
// Attached on load as we need the images to of loaded!
window.addEvent('load', function(){

    $$('img.coloured-image').each(function(element){

        // transform the image
        element.toGreyscale();

        // element.toSaturated will return image to saturated version if previously de-staurated with element.toGreyscale
        element.addEvent('mouseover', function(ev){
            this.toSaturated();
        })
        element.addEvent('mouseout', function(ev){
            this.toGreyscale();
        })
    })
})

Known Issues

Non-IE browsers must support the canvas tag

Will only work on locally served images from the same domain (due to browser same origin policies)

Discuss

A note on comments here: These comments are moderated. No comments will show up until they are approved. Comments that are not productive (i.e. inflammatory, rude, etc) will not be approved.

Found a bug in this plugin? Please report it this repository's Github Issues.