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" />
Add a comment
|
6 Answers
You can do it in CSS:
<style type="text/css">
#ImageButton1:hover { background-image: url('~/your_url/here') }
</style>
5 Comments
George Cummins
As long as ASP.NET passes the ID into the HTML document without alteration, it will work.
Pod Mays
@George Doesn't work for me. I tried adding .rollover:hover { code } to my .css and give Imagebutton rollover class but still doesn't work.
George Cummins
Can you post the HTML that is generated by teh ASP code? Also, what browser are you using?
Pod Mays
@george the id becomes #MainContent_ImageBUtton1, i tried setting it to that but still nothing. i'm viewing it with ie/fx.
George Cummins
Can you post the entire HTML tag for that image, and your modified CSS as well? Have you verified that the path to the image is valid (can you load it in your browser)?
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
}
});
});
1 Comment
balexandre
Appreciated, they do exist for a reason, and even works fine in IE6 as it just doesn't care about the code, plus my example is using
.data() just for the kicks of it ;)$(document).ready(function(){
$("input[type='image']").hover(function(){
$(this).attr("src","your/image.png");
},function(){
$(this).attr("src","your/old/image.png");
});
});
Comments
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>
Comments
First bind it with ( id or class ) hover function
change the src of image with attr
Comments
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.
