Simple JQuery image button mouse over (hover) effect

Simple JQuery Image Button Hover Effect

Overview:

   Here is just a quick down and dirty JQuery function to handle the MouseEnter and MouseLeave events of the target control labeled with the class "button" in this case it's an image control. As you can see below hover accepts two arguments, these arguments are then MouseEnter and Mouseleave events.

By changing these arguments you can control many other elements properties and add other effects. Thats really all there is too it

JQuery function:

     Just drop this in your page head section and set your appropriate image paths.

<script type="text/javascript">
 
        $(document).ready(function () {
          
            $(".button").hover(function () {
                $(this).attr("src", "./app_themes/default/images/submit_btn_hvr.png");
            }, function () {
                $(this).attr("src", "./app_themes/default/images/submit_btn.png");
            });
                                   
        });
 
    </script>

Markup:

Make sure that you set your initial ImageURl to the same path as the second argument in the hover method, otherwise you won't have an image on page load

 <asp:ImageButton ID="Imagebutton1" class="button" ImageUrl="~/app_themes/default/images/submit_btn.png"
        runat="server" />