如何改變圖像時，光標懸停在asp.net網站上的圖像

<asp:ImageButton ID="btn_Send" runat="server" ImageUrl="Styles/Images/send_message.png" 
            ValidationGroup="SM" CausesValidation="true" OnClick="Send_Click" />

我在我的網站上有這樣的按鈕，我怎麼可以改變圖像時，圖像上方用戶將鼠標懸停時，或者當用戶點擊圖片，我想要顯示用戶按鈕被點擊。因此，我爲send_message.png（1）創建了另一個圖像，看起來像點擊過，因此當用戶將鼠標懸停在點擊圖像上時，我想要顯示的圖像爲鼠標懸停事件上使用javascript。send_message.png（2）如何改變圖像時，光標懸停在asp.net網站上的圖像

來源

2011-11-17 Mark

感謝您的回答，我怎樣才能做到這一點當一個圖像被點擊 – Mark

試試這個

<asp:ImageButton id="ImageButton1" runat="server" ImageUrl="Images\1.gif" 
OnMouseOver="src='Images/2.gif';" 
OnMouseOut="src='Images/1.gif';"> 
</asp:ImageButton>

來源

2011-11-17 10:17:48

查看一下here！

來源

2011-11-17 10:12:09

爲什麼JavaScript？ –

@huMptyduMpty爲什麼不呢？ –

這就是所謂的CSS，如果瀏覽器與JavaScript禁用會發生什麼？ –

試試這個：

<asp:ImageButton ID="btn_Send" runat="server" ImageUrl="Styles/Images/send_message.png" ValidationGroup="SM" CausesValidation="true" OnClick="Send_Click" onmouseover="this.src='button2.jpg'" onmouseout="this.src='Styles/Images/send_message.png'"/>

來源

2011-11-17 10:12:18 Pedryk

<asp:ImageButton ID="btn_Send" runat="server" CssClass="myButton" 
            ValidationGroup="SM" CausesValidation="true" OnClick="Send_Click" />

CSS

.myButton{ 
    background:url("Styles/Images/send_message.png") no-repeat scroll 0 0 transparent; 
} 
.myButton:hover{ 
    background:url("Styles/Images/send_message2.png") no-repeat scroll 0 0 transparent; 
}

，如果你能做出一個圖像使用兩個圖像，這樣會更容易。

enter image description here

.myButton{ 
    background:url("Styles/Images/send_message.png") no-repeat scroll 0 0 transparent; 
} 
.myButton:hover{ 
    background-position:bottom; 
}

要改變形象click事件，您可以在buttonclick

btn_Send.Attributes.Add("class", "some-class");

，並在添加此您css

.some-class{background:url("Styles/Images/send_message2.png") no-repeat scroll 0 0 transparent !important;}

來源

2011-11-17 10:12:31

+1爲簡單和最好的方法。最好的方法是使用包含默認和懸停狀態的1張圖像（圖像拼接）。這意味着當用戶將鼠標懸停在圖像上時，沒有額外的圖像加載。對於類似的東西，Javascript的使用是一種非常陳舊過時的方法，當用戶將鼠標懸停在按鈕上時，除非您添加額外的JavaScript來預加載圖像，否則會有額外的圖片加載。 –

感謝您的回答，點擊圖片時我怎麼能做到這一點 – Mark

@Mark我更新了ansewer.please看看 –

在代碼頁的page_load事件中添加以下行。

Image1.Attributes.Add("onmouseover", "this.src='originalPic.jpg'"); 
Image1.Attributes.Add("onmouseout", "this.src='newPic.jpg'");

來源

2011-11-17 11:13:45

如何改變圖像時，光標懸停在asp.net網站上的圖像

回答

相關問題