4guysfromrolla (
http://www.4guysfromrolla.com ) have a good site with lots
of ASP.NET answers. They show how to make a rollover button which I used as
a basis for controls used on my company site at
http://www.ramuseco.com.
I created a web control that is used as a navigation bar and used this same
control on all of the pages. I upgraded it a bit.
The rollover button emits javascript to the client which handles the
rolllover effects. I include it's source code after my signature.
--
Bob Powell [MVP]
Visual C#, System.Drawing
Find great Windows Forms articles in Windows Forms Tips and Tricks
http://www.bobpowell.net/tipstricks.htm
Answer those GDI+ questions with the GDI+ FAQ
http://www.bobpowell.net/faqmain.htm
All new articles provide code in C# and VB.NET.
Subscribe to the RSS feeds provided and never miss a new article.
-----------------------------------------------------------------------------------------
/// <summary>
/// Summary description for RolloverButton1.
/// </summary>
[DefaultProperty("Text"),
ToolboxData("<{0}:RolloverButton runat=server></{0}:RolloverButton>")]
public class RolloverButton : System.Web.UI.WebControls.LinkButton
{
string _mouseOffUrl="";
string _selectedUrl="";
bool _selected;
[
Bindable(true),
Description("The image shown when the button is in a selected state."),
Category("Appearance")
]
public string SelectedUrl
{
get
{
return _selectedUrl;
}
set
{
_selectedUrl=value;
ViewState["SelectedUrl"]=value;
}
}
[
Bindable(true),
Description("When true this shows the selected image instead of the mouseoff
image"),
Category("Appearance")
]
public bool Selected
{
get
{
return _selected;
}
set
{
_selected=value;
if(value)
ViewState["MouseOffUrl"]=_selectedUrl;
else
ViewState["MouseOffUrl"]=_mouseOffUrl;
}
}
[
Bindable(true),
Description("The image shown when the mouse is not over the button"),
Category("Appearance")
]
public string MouseOffUrl
{
get{
return _mouseOffUrl;
}
set{
_mouseOffUrl=value;
ViewState["MouseOffUrl"]=value;
}
}
[
Bindable(true),
Description("The image shown when the mouse is over the button"),
Category("Appearance")
]
public string MouseOverUrl
{
get{
if(ViewState["MouseOverUrl"]==null)
return string.Empty;
return ViewState["MouseOverUrl"].ToString();
}
set{ViewState["MouseOverUrl"]=value;}
}
protected override void RenderContents(HtmlTextWriter writer)
{
if(this.MouseOffUrl!=string.Empty)
{
Image i=new Image();
i.Attributes["name"]=this.ClientID+"_img";
i.ImageUrl=this.MouseOffUrl;
i.AlternateText=this.Text;
i.ToolTip=this.ToolTip;
i.RenderControl(writer);
}
else
base.RenderContents (writer);
}
protected override void OnPreRender(EventArgs e)
{
if(ViewState["MouseOverUrl"]==null)
ViewState["MouseOverUrl"]="";
if(ViewState["MouseOffUrl"]==null)
ViewState["MouseOffUrl"]="";
if(ViewState["SelectedUrl"]==null)
ViewState["SelectedUrl"]="";
string ImageLoadScript = "RollOverBuilder"+this.ClientID;
string scriptBlock=string.Format(
"<script language=\"JavaScript\">\r\n"+
" <!--\r\n"+
" {0}_mouseoff = new Image();\r\n"+
" {0}_mouseoff.src = \"{1}\";\r\n"+
" {0}_mouseover = new Image();\r\n"+
" {0}_mouseover.src = \"{2}\";\r\n"+
" {0}_selected = new Image();\r\n"+
" {0}_selected.src = \"{3}\";\r\n"+
" // -->\r\n"+
"</script>",this.ClientID,ViewState["MouseOffUrl"].ToString(),ViewState["MouseOverUrl"].ToString(),ViewState["SelectedUrl"].ToString());
Page.RegisterClientScriptBlock(ImageLoadScript,scriptBlock);
this.Attributes["onmouseover"]=string.Format("display('{0}_img',
{0}_mouseover)",this.ClientID);
this.Attributes["onmouseout"]=string.Format("display('{0}_img',
{0}_mouseoff)",this.ClientID);
if(!Page.IsStartupScriptRegistered("displayScript"))
Page.RegisterStartupScript("displayScript",
"<script language=\"JavaScript\">\r\n"+
" <!--\r\n"+
" function display(imgName, imgUrl)\r\n"+
" {\r\n"+
" if(document.images && typeof imgUrl != 'undefined')\r\n"+
" document[imgName].src = imgUrl.src;\r\n"+
" }\r\n"+
" // -->\r\n"+
"</script>");
base.OnPreRender (e);
}
}
