GWT ImageSprite: how to move the background image to the right side

Question

I want to use the following style in GWT client bundle:

.myClass tr:hover { background: url("myImage.png") 185px 2px no-repeat; }

I declared the image as follows:

@Source("resources/myImage.png") @ImageOptions(repeatStyle = RepeatStyle.None) ImageResource myImage();

and changes the style to:

@sprite .myClass tr:hover { gwt-image: "myImage"; background-position: 185px 2px; }

But it does not work. There are several images in the generated XYZ.cache.png. So if I change the background-position in firebug I see the complete image bundle.

How can I move the background image to the right position?

Does it provide `pseudo-classes` ?! I think, you should set OnHover/ OnOut listeners... — Jama A., May 24 '11 at 12:42

score 1 · Answer 1 · answered May 25 '11 at 21:18

1

@sprite .myClass tr:hover {
    gwt-image: "myImage";
}

div.myClass tr:hover{
    background-position: 185px 2px; 
}

As you noticed, gwt-image will be default remove 'background-position' along with some other ones. To override the default position of 0 0, add a more specific css rule with the position you desire.

answered May 25 '11 at 21:18

Danny Kirchmeier

1,134
6
14

Sadly it doesn't affect anything. The whole image bundle is placed on left side. I tryed to change width, height und background-position in firebug but the image seems to have the width of the tr element. – user588961 Jun 06 '11 at 13:22
You can try to use background-position: right; in the .myClass tr:hover – F. Geraerts Sep 05 '13 at 14:57

score 1 · Answer 2 · edited Jun 16 '11 at 10:47

The generated width property of ImageSprite does not work because the width of tr element is fix. It is better zu create a td with an image element (as ImageResource) on the right side of table row. CSS looks like:

 <code>
    div.myClass img {
      visibility: hidden;
    }

div.myClass tr:hover img {
  visibility: visible;
}

</code>

So solution assumes there are no more images in the table.

GWT ImageSprite: how to move the background image to the right side

2 Answers2