CODEWITHSUNDEEP
jqueryasp.net
Pod Mays
Pod Mays

Reputation: 2583

JQuery: Change image button URL on mouse over

Whats the jquery script to change the imageurl on button mouse hover?

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/go.png" 
            PostBackUrl="~/Rep.aspx" />

Upvotes: 0

Views: 8661

Answers (6)

George Cummins
George Cummins

Reputation: 28906

You can do it in CSS: 

<style type="text/css">
    #ImageButton1:hover { background-image: url('~/your_url/here') }
</style>

Upvotes: 6

MonteK
MonteK

Reputation: 66

I agree with George Cummins answer above, however, I had to switch to a LinkButton and define the button dimensions in CSS:

    <%@ Page Title="Home Page" Language="C#" MasterPageFile="~/Site.master" AutoEventWireup="true"
    CodeBehind="Default.aspx.cs" Inherits="Sandbox_Asp.NET._4._0._Default" %>

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
    <style type="text/css">
        .ImgBtnAdd
        {
            background-image: url('/images/add.png');
            background-repeat: no-repeat;
            display: block;
            height: 31px;
            width: 60px;
            border: 0;
            outline: 0 !important;
        }
        .ImgBtnAdd:hover
        {
            background-image: url('/images/add_over.png');
        }
    </style>
</asp:Content>
<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
    Hover over the button:
    <asp:LinkButton runat="server" ID="LinkButtonAdd" CssClass="ImgBtnAdd"
        ToolTip="Add Button" Text="" />
</asp:Content>

Upvotes: 1

balexandre
balexandre

Reputation: 75073

change your code into this

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/go.png" 
        PostBackUrl="~/Rep.aspx" data-imageover="~/Images/go-hover.png" />

you can have multiple image buttons like:

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/Images/go1.png" 
        PostBackUrl="~/Rep.aspx" data-imageover="~/Images/go1-hover.png" />
<asp:ImageButton ID="ImageButton2" runat="server" ImageUrl="~/Images/go2.png" 
        PostBackUrl="~/Rep.aspx" data-imageover="~/Images/go2-hover.png" />
<asp:ImageButton ID="ImageButton3" runat="server" ImageUrl="~/Images/go3.png" 
        PostBackUrl="~/Rep.aspx" data-imageover="~/Images/go3-hover.png" />

then add the script

$(function() {
    // search all input type image, where data-imageover exists
    $("input[type='image'][data-imageover]").each(function() {
        $(this).hover(
            function() {  // on mouseover
                $(this).data("originalImg", $(this).prop("src")); // save original
                $(this).prop("src", $(this).prop("data-imageover"));
            },
            function() {  // on mouseout
                $(this).prop("src", $(this).data("originalImg")); // change to original
            }
    });
});

Upvotes: 3

anjan
anjan

Reputation: 3227

You can try this ...

var old_image = '';

$('<%= this.ImageButton1.ClientID %>').hover
(
  function()
  {
    old_image = $(this).attr('src');
    $(this).attr('src','/path/to/new_image');
  },
  function()
  {
    $(this).attr('src',old_image);
  }
);

You should use it, right after the button declaration inside a script block.

Upvotes: 0

Hari K T
Hari K T

Reputation: 4244

First bind it with ( id or class ) hover function

http://api.jquery.com/hover/

change the src of image with attr

http://api.jquery.com/attr/

Upvotes: 0

Fender
Fender

Reputation: 3055

$(document).ready(function(){
    $("input[type='image']").hover(function(){
        $(this).attr("src","your/image.png");
    },function(){
        $(this).attr("src","your/old/image.png");
    });
});

Upvotes: 1

Related Questions