JQuery：在鼠標上方更改圖像按鈕URL

Question

什麼是jquery腳本來更改按鈕鼠標懸停上的圖像？

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

Answer 1

你可以做到這一點在CSS：

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

Answer 2

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

Answer 3

首先將其綁定與（id或class）懸停功能

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

變化圖像與SRC attr

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

Answer 4

你可以試試這個...

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); 
    } 
); 

你應該使用它，腳本塊內的按鈕聲明之後。

Answer 5

改變你的代碼到這個

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

，你可以有一個像多個圖像按鈕：

<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" /> 

然後添加腳本

$(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 
      } 
    }); 
}); 

Answer 6

我與喬治·康明斯回答以上同意，不過，我不得不切換到LinkBut​​ton並在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>