I am creating a widget in which a portion of an image will be highlighted and the remaining portion will have an opacity 0.5.
For this i am using two images. The full image at the back with opacity 0.5. the portion of the image i want to be highlighted in the front. the front image is GWT's Clipped image.
I have a scenario where i have to resize the back image. Is there any way to resize the clipped image at the front?
GWT implements clipped images using CSS2 style (along with a blank image contents), as in the following example:
width: 300px; height: 300px;
background: url("/team.png") no-repeat scroll -5px -5px transparent;
Unfortunately CSS2 does not support scaling background (url-supplied) images, so there's not a natural way to scale a clipped image using built-in GWT libraries.
One option is to use a canvas, and load an image into it, as described at:
http://code.google.com/p/google-web-toolkit-incubator/wiki/GWTCanvas
Otherwise, your best option may be to either clip or scale (or both) the image on the server. Sorry!
-Bosh