در این مقاله نحوه تغییر نمای Button Image در هنگام بردن اشاره گر موس بر روی آن توضیح داده شده

به عنوان نمونه یک Web Site در ویژوال استودیو بسازید و سپس یک وب فرم با نام CsharpPage.aspx بسازید .

در ویژوال استودیو شما به راحتی یک تصویر که قابلیت کلیک کردن داشته باشد را می توانید در Toolbox با نام ImageButton پیدا کنید و به صفحه اضافه کنید .

با اضافه کردن ImageButton به صفحه کد آن به صورت زیر می باشد :

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/csharpcorner.png" OnClick="ImageButton1_Click" />  

در Asp.Net شما نمی توانید خاصیت onmouseover را در متد کد پشت صفحه قطع کنید .

تنها راه برای قطع کردن خاصیت onmouseover استفاده از استایل Css به همراه خاصیت هندلر onmouseover جاوا اسکریپت می باشد .

تمرکز ما در این مثال بیشتر بر روی onmousehover و onmouseout میباشد .

تغییر خاصیت ها

به کد زیر که یک تگ HTML برای دکمه میباشد دقت بفرمایید :

<input type="image" src="images/imag.png" onmouseover="this.src='images/imagover.png';" onmouseout="this.src='images/imagout.png';">  

onmouseover و onmouseout خاصیت های تگ دکمه میباشند .

همچنین کد ImageButton در Asp.Net به صورت زیر میباشد :

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="images/imag.png" OnMouseOver="this.src='images/imagover.png'" OnMouseOut="this.src='images/imagout.png'" />

اما در قسمت design mode اگر روی دکمه دوبار کلیک کنید وارد قسمت کد نویسی رخداد کلیک دکمه میشوید .برخی از این خاصیت ها  ممکن است نا پدید بشوند . این عمل به نظر مناسب ویرایش نمی باشد . بهتر است که تلفیقی از Asp.Net و JavaScript استفاده کنید .

مانند مثال زیر :

ImageButton1.Attributes.Add("onmouseover", "this.src=\"imagover.png\"");

این ساختار در هنگام اجرای صفحه باید اجرا شود و اغلب در رخداد کد پشت صفحه متد Page_Load  قرار دارد .

بعد از کد دکمه  ImageButton  :

<asp:ImageButton ID="ImageButton1" runat="server" ImageUrl="~/imag.png" /> 

سپس کد زیر را در صفحه مربوط به تگ های Html اضافه میکنیم :

<img id="ImageButton1" onmouseover="this.src="imagover.png"" src="imag.png" />  

خودکاری سازی :

اگر ما چند ImageButton در یک صفحه داشته باشیم  به سرعت متصل می کند به codebehind ساختار دکمه .ما از تگ  <%# code %> استفاده می کنیم که میتواند در اجرای صفحه .aspx اجرا شود . به راحتی رخداد mouseover handler را به یک شئی از id داده شده را اضافه می کنیم و سپس کد زیر را در قسمت code behind اضافه می کنیم :

protected string MouseOver(string s_id, string s_image_over)  
{  
   string javascript_onmouseover = "this.src=\"{0}\"";  
   WebControl wc = (WebControl)FindControl(s_id);  
   wc.Attributes.Add("onmouseover", string.Format(javascript_onmouseover, s_image_over));  
   return "";  
}  

در اینجا به قسمت بارگزاری صفحه متصل میشود .فراموش نکنید که ساختار page.DataBind(); را در متد Page_load قرار دهید . اکنون شما میتوانید با استفاده از تگ <%# %>تصویر مربوط به رخداد onmousover را مستقیم در صفحه .aspx تغییر دهید  , مانند مثال زیر :

<%# MouseOver("ImageButton1","imageover.png") %> 

مراحل زیر را به ترتیب انجام دهید :

1 . ساختار page.DataBind() را در متد Page_load قرار دهید.برای اتصال از تگ <%# … %> استفاده کنید .

2 .در صفحه .aspx خود یک متد جدید بسازید :

protected string MouseOverOut(string s_id, string s_image_out, string s_image_over)  
{  
   string javascript_onmouseout = "this.src=\"{0}\"";  
   string javascript_onmouseover = "this.src=\"{0}\"";  
   WebControl wc = (WebControl)FindControl(s_id);  
   wc.Attributes.Add("onmouseover", string.Format(javascript_onmouseover, s_image_over));  
   wc.Attributes.Add("onmouseout", string.Format(javascript_onmouseout, s_image_out));  
   return "";  
}  

3 . می توانید به عنوان مثال از تصاویر زیر استفاده کنید :

و نام آن ها را به csharpcorner.png و csharpcornerlight.png قرار دهید .

4 . در صفحه .aspx خود کد زیر را اضافه کنید :

<asp:ImageButton ID="ImageButtonCsharpCorner" runat="server" ImageUrl="~/csharpcorner.png" />  
<%# MouseOverOut("ImageButtonCsharpCorner","csharpcorner.png", "csharpcornerlight.png") %> 

این دستور MouseOverOut جستجو می کند برای شئی که شناسه ImageButtonCsharCorner و خاصیت onmouseover و onmouseout  را دز ساختار آن اضافه می کند.سپس دکمه نمای اصلی را بر می گرداند و شما حتمی باید همان تصویر را که در هنگام mouse leave می خواهید استفاده شود , قرار دهید .

برای داشتن افکت hilight فقط کافیست تصویر imageover.png روشنتر از تصویر imageout.png بسازید .

توجه داشته باشید که این تابع را به توابه تصاویر نیز اضافه کنید مانند زیر :

<asp:Image ID="Image1" runat="server" ImageUrl="~/f32.png" />  
<%# MouseOverOut("Image1","csharpcorner.png", "csharpcornerlight.png") %> 

اگر شما مستقیم تگ Html تصویر را اضافه کنید در نهایت در این متد پیغام خطا نمایش می دهد.