CODEWITHSUNDEEP
cssgwt
Swapnil Sonawane
Swapnil Sonawane

Reputation: 1455

set image to label through css in gwt project

I am using gwt project. In which I have different type of label

  1. question
  2. answer
  3. auther

all of label has common css that is as follows

labelCss  {
          background: url("images/img1.png") no-repeat scroll 1px 
                50% transparent;

          background-color: #F2F6F9;
          font-size: 13px;
          margin: 7px 2px 4px 1px;
          padding-bottom: 3px;
          padding-left: 8px;
          padding-top: 6px
          }

I want to change image as type of label change . Is it possible using single css property. or I am doing something wrong.

If anyone knows please reply

Thanks in advance

Upvotes: 0

Views: 5132

Answers (2)

nico
nico

Reputation: 51640

Either you have multiple CSS classes or you use JS to switch images.

For instance:

.generalLabel
      {
      background-color: #F2F6F9;
      font-size: 13px;
      margin: 7px 2px 4px 1px;
      padding-bottom: 3px;
      padding-left: 8px;
      padding-top: 6px
      }

.label1
      {
      background: url("images/img1.png") no-repeat scroll 1px 
            50% transparent;
      }


.label2
      {
      background: url("images/img2.png") no-repeat scroll 1px 
            50% transparent;
      }

Then you can use class="generalLabel label1" or class="generalLabel label2" on the element that you want to style.

The other option would be to use JS and change the image URL based on the type, but I would not suggest to do that unless there is a very specific reason (and I cannot think of one) for not using CSS only.

Upvotes: 1

TuteC
TuteC

Reputation: 4382

You can have a .label for the general styling, but you will need a special class for each type of label, where you specify which image is going to present. Small example:

#inicio li {
  display: block;
  width: 177px;
  height: 76px;
  margin: 8px 8px 8px 0;
  float: left
}
#inicio #ini1 {
  background: url(/imgs/Inicio1.jpg);
}
#inicio #ini2 {
  background: url(/imgs/Inicio2.jpg);
}
#inicio #ini3 {
  background: url(/imgs/Inicio3.jpg);
}

Upvotes: 1

Related Questions