控件實現點擊預覽圖片更改頁面背景圖片的效果

原創

明日科技-w

2020-02-22 13:42

本實例將在頁面上放置2個ImageButton並設置背景圖片，當點擊其中一個按鈕時對應的會將網頁的背景圖片更改爲按鈕的背景圖片。

程序實現的主要步驟爲：

（1）新建一個網站並創建Default.aspx頁面，在Default.aspx頁面上添加2個ImageButton控件，其屬性設置如表3.9所示。

表3.9 ImageButton控件屬性設置

控件類型	控件名稱	主要屬性設置	用途
標準/ImageButton控件1	ImageButton1	ImageUrl屬性設置爲“/image/Koala.jpg” AlternateText爲“ImageButton按鈕” BorderColor爲“Black” BorderWidth爲“2px”	輸入用戶名
			輸入密碼
標準/ImageButton控件2	ImageButton2	ImageUrl屬性設置爲“/image/Penguins.jpg” AlternateText爲“ImageButton按鈕” BorderColor爲“Black” BorderWidth爲“2px”	【登錄】按鈕
			【取消】按鈕

（2）屬性設置完成之後再來添加單擊事件，將編輯器切換到“設計”模式下，分別雙擊2個按鈕使其自動生成2個事件處理方法，這時在後臺代碼的Page_Load方法上面定義一個字符串類型的全局變量imgUrl，用於接收2個按鈕的圖片URL地址，接着在2個按鈕的處理方法中分別獲取到各自的ImageUrl屬性的值，再講獲取出來的值賦值到全局變量imgUrl中，這一過程的全部實現代碼如下：

01 publicpartialclass_Default : System.Web.UI.Page

02 {

03 publicstring imgUrl = "";//定義全局變量

04 protectedvoid Page_Load(object sender, EventArgse)

05     {

 

06     }

07 protectedvoidImageButton1_Click(object sender, ImageClickEventArgs e)

08     {

09         imgUrl = ((ImageButton)sender).ImageUrl;//點擊第一個圖片時設置imgUrl變量的圖片路徑

10     }

11 protectedvoidImageButton2_Click(object sender, ImageClickEventArgs e)

12     {

13         imgUrl = ((ImageButton)sender).ImageUrl;//點擊第二個圖片時設置imgUrl變量的圖片路徑

14     }

15 }

（3）最後一步就是設置網頁的背景圖片，這裏需要通過Css樣式來實現，首先在頁面“源”中找到body標籤，然後在body標籤上定義style屬性並且指定屬性樣式background-image，在通過內嵌表達式的方式來綁定背景圖片的URL地址，body及其子元素內容如下：

01  <bodystyle="background-image:url('<%=imgUrl%>'); background-repeat:no-repeat;">

02  <formid="form1"runat="server">

03  <div>

04  <asp:ImageButtonID="ImageButton1"Width="100"Height="70"AlternateText="ImageButton按鈕"BorderColor="Black"BorderWidth="2px"ImageUrl="/image/Koala.jpg"runat="server"OnClick="ImageButton1_Click"/>

05       

06  <asp:ImageButtonID="ImageButton2"Width="100"Height="70"AlternateText="ImageButton按鈕"BorderColor="Black"BorderWidth="2px"ImageUrl="/image/Penguins.jpg"runat="server"OnClick="ImageButton2_Click"/>

07  </div>

08  </form>

09  </body>

運行實例，單擊ImageButton預覽按鈕，頁面背景將被設置爲預覽按鈕圖片的效果，如圖3.22。