How to add style to a image when you hover over it, in asp.net website

Question

I have a image in my website, How can I add style to it so that it looks like a real button. now when I click it or move the mouse over it there is no changes to the image. when click or the mouse it over it how can I add style to it. Thanks

<asp:ImageButton ID="Img_ComposeMessage" PostBackUrl="~/SendMessage.aspx" ImageUrl="Styles/Images/ComposeMessage.png"
                            runat="server"  />

Answer 1

Sounds like something you can easily accomplish with JavaScript / jQuery; just hook into the mouseover event and change the image then.

If you're worried about flash of unstyled content, you could switch to using css background/spriting for your image along with an asp:linkbutton instead of an asp:imagebutton

Here's a quick tutorial to get you started - http://www.learningjquery.com/2007/02/quick-tip-set-hover-class-for-anything

Answer 2

You have to use Javascript and/or CSS styling to change the ImageButtons properties.

Client Side javascript method calls can be added to the ImageButton's OnClientClick Property.

To ensure you have a static ID property on the control when rendered, for use with CSS effect or JQuery, use the ClientIDMode Property, set it to Static, the ID property you define with be rendered.