how to show a background image with h:commandButton?

[asfak.mahamud]

I am now using bluesky skin and I have a h:commandButton in my page.

Now my requirement is to show a transparent background image under the button and I also need a mouse hover effect (change a different image) on that button.



What should I do?

Need a suggestion soon.

[asfak.mahamud]

Let me add one more point here...... I need a suggestion so that all <h:commandButton s' style can be controlled from one place.......

I do not want to add any css class as attribute of <h:commandButton

[ilya_shaikovsky]

read about standard components skinning in developer guide.

[asfak.mahamud]

Thanks for your reply. I've actually read that but could not figure out what to do.

I have an image button.gif in WebContent/META-INF/button.gif

I have a styles.xcss file in WebContent/META-INF/skins.

My application has an <h:commandButton which is rendered as

<input id="registerActionForm:cancel" type="submit" name="registerActionForm:cancel" value="Cancel" />

in the html file.

styles.xcss file has style for this input as

<u:selector name="input[type='submit'], input[type='button']">
 <u:style name="padding" value="1px 4px"/>
 <u:style name="background-image">
 <f:resource f:key="org.richfaces.renderkit.images.TabGradientB"/>
 </u:style>
 <u:style name="border" value="1px solid #FEFEFE"/>
 <u:style name="outline" value="1px solid"/>
 <u:style name="outline-color" value="#FF0000"/>
 <u:style name="color" skin="controlTextColor"/>
 </u:selector>

My html file gets all the css defined above from the styles.xcss. I've tested this.

Now I want to change the background image from org.richfaces.renderkit.images.TabGradientB to my button.gif

I tried to give the path of the button.gif in the <f:resource f:key=" attribute. But the application throws exceptions saying that it did not find the resources' path


Question: What should I do to see the image button.gif as background image of all of my <h:commandButton?

[asfak.mahamud]

It's done, thanks.