How to Retain the Styling / Hover Functionality of Image Hyperlinks in a GridView TemplateField using ImageButtons

Question

Within each row of a GridView (using the TemplateField), I would like to display image buttons that will be used to control the data in that row. I would then like to swap out the images of the buttons when a user first hovers over the GridView row and then again when the user hovers over a specific button.

I can easily accomplish this hover functionality using CSS and image hyperlinks, however when using image hyperlinks, I am unable to raise any server-side events to handle editing the particular row.

In the past, I've used ImageButtons instead of image hyperlinks. I added the CommandName parameter to the ImageButtons and then handled the GridView RowCommand in code:

<asp:ImageButton ID="btnSelect" CommandName="select" runat="server" ImageUrl="~/images/iconSelect1.png" />

In order to change the ImageButton image on hover, I used Javascript:

<asp:ImageButton ID="btnSelect" onmouseover="this.src='../images/iconSelect3.png';" onmouseout="this.src='../images/iconSelect2.png';" runat="server" ImageUrl="~/images/iconSelect1.png" />

However, in this case, I need to also replace the ImageButton image when a user first hovers over the GridView row itself.

To sum up, when a user hovers over a GridView row, the ImageButtons on that row will all swap image1 for image2. Then when a user hovers over a specific ImageButton, its image will switch from image2 to image 3.

Thanks in advance for any suggestions you may have as to the best approach.

-------------------------------------EDIT-----------------------------------------

Not sure if this is the best approach, but I found a potential solution using jQuery:

<ItemTemplate>
    <div class="gvRow">

        <asp:ImageButton ID="btnSelect" CssClass="btnSelect" runat="server" ImageUrl="~/images/iconSelect1.png" onmouseover="this.src='../images/iconSelect3.png';" onmouseout="this.src='../images/iconSelect2.png';" />

    </div>
</ItemTemplate>

<script type="text/javascript">                                         
    $('.gvRow').hover(
        function () {
            $(this).find(".btnSelect").attr("src", "../images/iconSelect2.png");
        },
        function () {
            $(this).find(".btnSelect").attr("src", "../images/iconSelect1.png");
        }
    );
</script>

So far, this is working well, but I'm open to suggestions for handling this better.

Hopefully, this will help someone else.

score 0 · Answer 1 · answered Feb 08 '13 at 00:59

Your solution looks like a good one!

For consistency, I would have tweaked it slightly so that jquery was used to implement both hover behaviours, e.g. by adding this to your existing script:

$('.btnSelect').hover(
    function () {
        $(this).attr("src", "../images/iconSelect3.png");
    },
    function () {
        $(this).attr("src", "../images/iconSelect2.png");
    }
);

How to Retain the Styling / Hover Functionality of Image Hyperlinks in a GridView TemplateField using ImageButtons

1 Answers1