2

This is the code for CommandField with, background image.

<asp:CommandField DeleteImageUrl="~/cms_images/cancel.gif" ShowDeleteButton="true" ButtonType="Image" />

I would like to show this image "~/cms_images/cancel-hover.gif" when a user hovers on the CommandField.
How do I do it?

Thanks.

Null Head
  • 2,877
  • 13
  • 61
  • 83
  • 1
    Just out of curiousity, why would you want that to happen on the server-side? Image rollovers are usually handled client-side via JavaScript/JQuery, eliminating the need for posting the page back to the server to simply swap out an image. – Tim Aug 12 '11 at 05:06
  • Sorry for complicating. I wanted to mention the mouseout & mouseover images on the server side, not the actual swapping. Edited accordingly. – Null Head Aug 12 '11 at 05:08
  • I'm still not sure why you're wanting to accomplish this on the server side, as it seems unnecessarily complex. If a user moves the mouse over the button and it results in a postback to the server, by the time the button is redrawn the mouse may no longer be over it. – Tim Aug 12 '11 at 05:33
  • 1
    i think you are confused by server side and client side. hover on server side will be a nightmare. wow postbacks everywhere like mine fields :) – naveen Aug 13 '11 at 05:29
  • I was thinking setting JS on server side. `e.Row.Attributes["onmouseover"] = "this.style.color='DodgerBlue';this.style.cursor='pointer';";` Not about postbacks for every hover. – Null Head Aug 14 '11 at 23:13
  • @Rakasi - nice edits; you made the question much more approachable and effective. – Merenzo Feb 06 '13 at 05:57

1 Answers1

5

You can accomplish this with CSS. In the page markup you just need to declare a specific style for the command field - essentially this is the CSS style of the button:

<asp:CommandField ShowDeleteButton="true" ButtonType="Button" ControlStyle-CssClass="cancel" />

And in .css file define this style, and define how it changes when user hovers the element:

.cancel
{
    background-image: url(cms_images/cancel.gif);
}

.cancel:hover
{
    background-image: url(cms_images/cancel-hover.gif);
}

Note that in CSS you should provide a URL relative to the page location. In the code above I assume that the page is situated in the root folder of the web site.

Andrei
  • 55,890
  • 9
  • 87
  • 108