If you are looking for the easiest css-proof way. You could create the grayscale of your image in Photoshop, and simply absolutely position both the color image and the greyscale image on top of another. Then display: block one image and display: none the other , depending on which one you wanted to see when you hovered. And then add a fade for a nice transition…. I believe this would work, could be completely wrong though
You can do it in PHP and you’re guaranteed cross-browser support. If you have a lot of images, or the image is really big then it might slow down the page load a bit but in my eyes it’s worth the outcome. I really hate dealing with browser issues when I dont need to. There are a few tutorials out there but this one worked for me quickly: http://php.about.com/od/gdlibrary/ss/grayscale_gd.htm
EDIT: Crap I just realized you wanted it to work on roll-over. Well, I guess you could use the css hover property with the php idea above as the second image. It would be like swatting a fly with an anvil but you’ll know it will always work.