I have created Image. How to convert color Image to black&white. For example, on mouse over it.
+3
A:
First open it in a decent image editor, convert it to grayscale (I assume that you want more colors than black and white ;) ), save it in the webapplication.
Then, on the mouseover just call some JavaScript function which changes the src of the HTML <img> element to point to the URL of the grayscale image instead.
Basic kickoff example:
<img src="color.jpg" onmouseover="this.src='blackwhite.jpg'">
BalusC
2010-06-16 19:09:33
It's been a while since I used GWT, but you can probably do this without "resorting" to Javascript (`Image.addMouseListener()` and `Image.setURL()`).
Mark Peters
2010-06-16 19:13:35
Dasha
2010-06-16 19:37:10
No. You may consider merging the two images in a CSS sprite instead and use `background-position`. This way the user doesn't need to wait for the b/w image to get loaded. Also see http://css-tricks.com/css-sprites
BalusC
2010-06-16 20:23:24
+1
A:
The easiest way is to create another image in black and white server side (or using an image editing program if the image isn't dynamic) and swap out the color one for b&w on mouse over.
edit
Then just just set the opacity using css: http://www.quirksmode.org/css/opacity.html
Byron Whitlock
2010-06-16 19:10:24
I'm trying to make a menu-item disabled (http://code.google.com/p/google-web-toolkit/issues/detail?id=1649). But my menu-item contains "random" Image.
Dasha
2010-06-16 19:32:30
A:
The Pixastic JS Image Manipulation library has this feature, which you can call via JSNI.
There's also this script which appears to only work in IE using proprietary Microsoft magic.
But honestly, just generate a desaturated image for every image you want on the server-side, and swap them out using JS/CSS.
Jason Hall
2010-06-16 20:19:06