How can I create this type of button?

[Miguel Dias Moura]

Hello,

On an ASP.NET/VB web page I have an image button:

<asp:ImageButton id="btn" ImageUrl="..." Command="..."
CommandArgument="..."
CausesValidation="..." OnClick="OnClickMethod" runat="server"/>

How can I create a rollover effect? Is it possible?

Thanks,
Miguel

 

[John Saunders]

Hello,

On an ASP.NET/VB web page I have an image button:

<asp:ImageButton id="btn" ImageUrl="..." Command="..."
CommandArgument="..."
CausesValidation="..." OnClick="OnClickMethod" runat="server"/>

How can I create a rollover effect? Is it possible?

This has to be done in client-side JavaScript. You'd have an onmouseover
event handler to start the effect, and an onmouseout event handler to end
it. You can add these handlers to the button by calling

btn.Attributes.Add("onmouseover", "domouseover();");
btn.Attributes.Add("onmouseout", "domouseout();");

in the Prerender event of the page. You add the script for these two
functions by using Page.RegisterClientScriptBlock, also in PreRender.

As to what you do in the two functions, it's whatever you want the rollover
to look like. Just start the styles the same as domouseout will leave them.

John Saunders

 

[Arthur Dent]

You can also put the javascript right in the attribute, then you can very
easily make your image dynamic if you want base on a database or something
like that. You can try something like:

imgBtn.Attributes.Add("onmouseover","javascript:this.src='./images/myimg2.gif'")
imgBtn.Attributes.Add("onmouseout","javascript:this.src='./images/myimg1.gif'")

 

[Steve C. Orr [MVP, MCSD]]

Here's the code for an image rollover button control that I made.

--
I hope this helps,
Steve C. Orr, MCSD, MVP
http://Steve.Orr.net


/// <summary>

/// ImageRolloverButton Control

/// </summary>

[DefaultProperty("ImageURL"), ToolboxData(

"<{0}:ImageRolloverButton " +

"runat=server></{0}:ImageRolloverButton>")]

public class ImageRolloverButton :

System.Web.UI.WebControls.ImageButton

{

private string s;

/// <devdoc>

/// <para>Gets or sets the URL reference

/// to the image to display when the mouse

/// is moved over the image.</para>

/// </devdoc>

[Bindable(true), Category("Appearance"),

DefaultValue(""), Editor(typeof(

System.Web.UI.Design.ImageUrlEditor), typeof(

System.Drawing.Design.UITypeEditor))]

public virtual string RolloverImageUrl

{

get

{

string s = (string)ViewState["RolloverImageUrl"];

return((s == null) ? String.Empty : s);

}

set

{

s=value;

ViewState["RolloverImageUrl"] = s;

}

}

public override string ImageUrl

{

get {return(base.ImageUrl);}

set {base.ImageUrl=value;}

}

protected override void OnPreRender(EventArgs e)

{

Attributes.Add("onMouseOver", "this.src=MyImage" +

this.ClientID);

Attributes.Add("onMouseOut", "this.src='" +

base.ImageUrl + "'");

this.Page.RegisterStartupScript("MyImageKey" +

this.ClientID,"<script language=javascript>MyImage"

+ this.ClientID + "='" + s + "'</script>");

base.OnPreRender(e);

}

}

}

 

[TJS]

how does this get implemented ?

 

[Steve C. Orr [MVP, MCSD]]

As a Class Library.

 

[TJS]

hmmm, no...
it doesn't help

As a Class Library.

 

[Steve C. Orr [MVP, MCSD]]

You create a new class library.
You paste the code.
You compile it into a DLL.
You reference the DLL from another project.
You add the DLL to your toolbox.
Drag & Drop.

--
I hope this helps,
Steve C. Orr, MCSD, MVP
http://Steve.Orr.net

 

[TJS]

you must be talking about VS stuff

I don't use VS

 

[Steve C. Orr [MVP, MCSD]]

Well then you should be use to doing this kind of thing manually.
Compile the code into a DLL and use it in another project.
I suggest using Visual Studio though; it makes things much easier.