1

Possible Duplicate:
Convert an image to grayscale in HTML/CSS

I want to take a colored .png image on page load and turns it grayscale, but then when you hover over the image, it turns back to color, and on mouseout back to gray. I've tried at least 10 different tutorials on this, but none of them worked. The element that I need to change from color to gray, back to color, and back to gray, is .photo. http://jamestestblog3.tumblr.com/ is my testing website.

How can I do this?

Community
  • 1
  • 1
James Charless Dickinson
  • 446
  • 5
  • 17
  • 41
  • 2
    Only way to be sure, 2 images. – Dejan Marjanović Dec 04 '11 at 21:21
  • Michael - This theme is going to be for public use, mostly for photo blogs. Some photo blogs reblog up to 500 photos a day, I need this to be Jquery, not 2 images. – James Charless Dickinson Dec 04 '11 at 21:23
  • @James as far as I know there is no good cross-browser way to do this. Would you rather have 2 images or have the solution only work for 60% of your visitors? – Gordon Gustafson Dec 04 '11 at 21:25
  • I'd rather have the solution work for 60% of my visitors, I can't use 2 images, it's a photo blog and my website is built up on entry's, not divs. (It's like wordpress, when I post it goes to my blog. I can control what the posts look like, but the divs are generated by themselves.) – James Charless Dickinson Dec 04 '11 at 21:27
  • 1
    You can do this with both SVG and HTML5 Canvas. – Phrogz Dec 04 '11 at 21:33
  • I know. I'm 13 and I just finished learning CSS. I have no clue about Jquery, Javascript, SVG, or HTML5. I'd really appreciate it if someone could code it for me. I hate asking but I really need this done. – James Charless Dickinson Dec 04 '11 at 21:35
  • 1
    @JamesCharlessDickinson See the duplicate question; it has a link to a JS answer as well as SVG answers. – Phrogz Dec 04 '11 at 21:36
  • @Phrogz The Javascript one can't load images from another domain, but the website this would be on would have to load them from sites such as flickr, weheartit, ect. Also, I need the image to be gray on page load, and turn color on mouseover. – James Charless Dickinson Dec 04 '11 at 21:38
  • @JamesCharlessDickinson If you're going to steal images from other hosts, you'll need to write your own proxy on your web server that loads the images for you. – Phrogz Dec 04 '11 at 21:41
  • It's not stealing images. It's a blogging website, where you can reblog photos. – James Charless Dickinson Dec 04 '11 at 21:42

1 Answers1

1

As others mentioned, the cross domain issue is the problem. Unfortunately, tumblr uses a different domain for images than the one your blog is hosted on. I used a third-party conversion site in the demo below (http://www.maxnov.com/getimagedata) to get the image data. I tried this same thing on my tumblr theme (http://www.tumblr.com/theme/32199) but ended up not using it.

Demo: http://jsfiddle.net/ThinkingStiff/vXWvz/

HTML:

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="http://thinkingstiff.com/scripts/get-image-data.js"></script>

<img id="image" alt="" src="http://thinkingstiff.com/images/100x100.png" />

Script:

function initializeImage( imageElement ) {

    $.getImageData( {

        url: imageElement.src,
        success: function( image ) {

            if( !imageElement.dataset.color ) {

                var canvas = document.createElement( 'canvas' ),
                    context = canvas.getContext( '2d' ),
                    width = image.width,
                    height = image.height;

                canvas.width = width;
                canvas.height = height;
                context.drawImage( image, 0, 0 );

                var pixels = context.getImageData( 0, 0, width, height );

                for( var y = 0; y < pixels.height; y++ ) {

                     for( var x = 0; x < pixels.width; x++ ) {

                          var i = ( y * 4 ) * pixels.width + x * 4;
                          var avg = ( 
                                pixels.data[i] 
                              + pixels.data[i + 1] 
                              + pixels.data[i + 2] 
                          ) / 3;
                          pixels.data[i] = avg;
                          pixels.data[i + 1] = avg;
                          pixels.data[i + 2] = avg;

                     };

                };

                context.putImageData( pixels, 0, 0, 0, 0, pixels.width, pixels.height );
                imageElement.dataset.color = imageElement.src;
                imageElement.dataset.gray = canvas.toDataURL();
                imageElement.src = canvas.toDataURL();

            };

        }

    } );

};

var image = document.getElementById( 'image' );

initializeImage( image );

image.addEventListener( 'mouseover', function () {

    this.src = this.dataset.color;

} );

image.addEventListener( 'mouseout', function () {

    this.src = this.dataset.gray;

} );
ThinkingStiff
  • 64,767
  • 30
  • 146
  • 239