GWT Clipped image

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开发者_JAVA百科 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

One alternative with GWT 2.0+, if you don't mind to serve different images is define a ClientBundle with different DataResources, one for each image. Next you should use the DataResource's url for setting the images' url.

interface MyClientBundle extends ClientBundle {
   @Source("img1.png")
   DataResource myImg1();
   @Source("img2.png")
   DataResource myImg2();
}

private static final MyClientBundle BUNDLE = GWT.create(MyClientBundle.class);

then...

new Image(BUNDLE.myImg1().getUrl());

It should work and GWT can generate "data:" URL's for the browser's that support it, eliminating the need for a separate image download at all.

By the way: do you really need to resize? Visually it's not very nice.