Button-rollover with using RegisterClientScriptBlock Method in asp.net

Now let's write a better version of the button rollover by using the RegisterClientScriptBlock method. The problem with the rollover button example from earlier is that when the user's mouse hovered over the button image, the rollover image had to be retrieved from the server in a different request. A better rollover button solution would be where the rollover image of the button is already downloaded and stored in the client's cache so that when the end user hovers over the button, it is immediately displayed. To success this we must create a JavaScript function. The following example shows the JavaScript function as well as the use of the RegisterClientScriptBlock method to get the function onto the page. For this example, the code-behind only needs a Page_Load event for an ImageButton server control.

In .aspx,

<form id="form1" runat="server">

<div>

<asp:ImageButton id="ImageButton1" runat="server" ImageUrl="~/Images/img1.jpg">asp:ImageButton>

<div>

<form>

In code-behind,

protected void Page_Load(object sender, EventArgs e)

{

ClientScript.RegisterClientScriptBlock(this.GetType(), "MyScript",

"<script type='text/javascript'>" +

"if (document.images) {" +

"MyButton = new Image;" +

"MyButtonShaded = new Image;" +

"MyButton.src = 'Images/img1.jpg';" +

"MyButtonShaded.src = 'Images/img2.jpg';" +

"}" +

"else {" +

"MyButton = '';" +

"MyButtonShaded = '';" +

"}" +

"</script>");

ImageButton1.Attributes.Add("onmouseover", "this.src = MyButtonShaded.src;");

ImageButton1.Attributes.Add("onmouseout", "this.src = MyButton.src;");

}

That' it. :)

Performing a Simple Button-rollover

The rollover effect experience is when the end user hovers their mouse over a button on a Web page and then button itself changes color or image. This can be especially useful for Web pages that have attractive buttons, and it would be beneficial from a usability viewpoint to notify the end user of the button they would be clicking prior to clicking it.

This is fairly easy to do before server controls came along and it isn't that difficult now with server controls. The code for performing such an operation is as follows:

<form id="form1" runat="server">

<asp:ImageButton id="ImageButton2" onmouseover="this.src='images/img2.jpg'"

onmouseout="this.src='images/img1.jpg';" runat="server" ImageUrl="~/Images/img1.jpg"/>

<form>