Grayscale Effect with CSS on other browsers beside IE

[tech_support]

I'd like to make the same grayscale effect on IE compatiable with FireFox. Any ideas?

[djr33]

Is that a filter?
Not compatible.

I don't know if there is another way.

It's not that hard to just take an image and make it greyscale in most any graphics application, or you could even use the PHP GD library, if you must have it dynamically generated.

[Twey]

No, it isn't possible (without Flash, Java, &c.).

[tech_support]

How would you do it with PHP?

[djr33]

Check this out, maybe:
(From http://us3.php.net/manual/en/functio...ymergegray.php )

To convert the picture to grayscale, use the following code:

<?php
   // replace with your files
   $originalFileName    = "colorPicture.jpg";
   $destinationFileName = "bwPicture.jpg";
  
   // create a copy of the original image
   // works with jpg images
   // fell free to adapt to other formats ;)
   $fullPath = explode(".",$originalFileName);
   $lastIndex = sizeof($fullPath) - 1;
   $extension = $fullPath[$lastIndex];
   if (preg_match("/jpg|jpeg|JPG|JPEG/", $extension)){
       $sourceImage = imagecreatefromjpeg($originalFileName);
   }

   // get image dimensions
   $img_width  = imageSX($sourceImage);
   $img_height = imageSY($sourceImage);

   // convert to grayscale
   // note: this will NOT affect your original image, unless
   // originalFileName and destinationFileName are the same
   for ($y = 0; $y <$img_height; $y++) {
       for ($x = 0; $x <$img_width; $x++) {
           $rgb = imagecolorat($sourceImage, $x, $y);
           $red  = ($rgb >> 16) & 0xFF;
           $green = ($rgb >> 8)  & 0xFF;
           $blue  = $rgb & 0xFF;

           $gray = round(.299*$red + .587*$green + .114*$blue);
          
           // shift gray level to the left
           $grayR = $gray << 16;  // R: red
           $grayG = $gray << 8;    // G: green
           $grayB = $gray;        // B: blue
          
           // OR operation to compute gray value
           $grayColor = $grayR | $grayG | $grayB;

           // set the pixel color
           imagesetpixel ($sourceImage, $x, $y, $grayColor);
           imagecolorallocate ($sourceImage, $gray, $gray, $gray);
       }
   }

   // copy pixel values to new file buffer
   $destinationImage = ImageCreateTrueColor($img_width, $img_height);
   imagecopy($destinationImage, $sourceImage, 0, 0, 0, 0, $img_width, $img_height);

   // create file on disk
   imagejpeg($destinationImage, $destinationFileName);
  
   // destroy temp image buffers
   imagedestroy($destinationImage);   
   imagedestroy($sourceImage);
?>

Copy-paste, replace the file names on the top and there you go (picture files must be in same folder as this script. If not, you will have to do your own file management).

[tech_support]

I mean, making the WHOLE PAGE grayscale (just like when you click Logout in these forums when using IE)

[djr33]

Ah. HTML, etc?

Interesting.

I'm not sure.

I'm not seeing anything in IE when I log out. Or FF, for that matter.

The way, I suppose, would be to fade/switch to greyscale CSS, Images, etc.

Depending on the purpose, you could just create alternate CSS, use when needed, and be done with it.

[tech_support]

Have you tried clicking Logout on the menu?

It will ask for a confirmation as well as grayscaling the screen.

[Twey]

You can overlay a semi-transparent element over the page, which will result in the same sort of effect if the user's brightness/contrast is sufficiently low, and be an acceptable alternative if not.

[djr33]

Interesting. I did just see it in IE. Before, I clicked ok, expecting something after that, and missed as the confirm was there.
That is, according to the code, just a filter.
So... still not sure.

Twey's idea might work. It would work really well if you could set the blending mode, like in photoshop, to "color" or something...

I still suggest a CSS switch and perhaps something about images... like switcing the SRCs, similar to a mouseover, or perhaps PHP GD if need be.