BACKGROUND images and with button text on it.strout said:It's a pain to create each button with 2 images: button_on.gif button_off.gif
I am looking for a control that have on/off two states, preferred as
Any hint?
button, just for BACKGROUNDIMAGE. Or use CSS file.strout said:Thanks for your code.
Actually that's what I try to avoid, ie, create on/off images for every button.
Take a look at mail.yahoo.com and hotmail.com. They don't use images for
However, if you need fancy button with well designed button, that's still a problem maybe.
John Saunders said:BACKGROUND images and with button text on it.strout said:It's a pain to create each button with 2 images: button_on.gif button_off.gif
I am looking for a control that have on/off two states, preferred asAny hint?
The following just worked in Visual Web Developer Express Beta 1. It may
require slight modification to make it work in earlier versions.
MouseOverImageButton.cs:
#region Using directives
using System;
using System.Collections.Generic;
using System.ComponentModel;
using System.ComponentModel.Design;
using System.Text;
using System.Web.UI;
using System.Web.UI.Design;
using System.Web.UI.WebControls;
#endregion
namespace JustWebControls
{
public class MouseOverImageButton : ImageButton
{
public MouseOverImageButton()
{
}
#region Public Properties
[Category("Appearance"), Description("URL to the image to be used
when the mouse is over the control"),
Editor(typeof(System.Web.UI.Design.UrlEditor),
typeof(System.Drawing.Design.UITypeEditor))]
public string MouseOverImageUrl
{
get { return (string)ViewState["mouseOverImageUrl"]; }
set { ViewState["mouseOverImageUrl"] = value; }
}
#endregion
#region Rendering
protected override void AddAttributesToRender(HtmlTextWriter writer)
{
writer.AddAttribute("mouseoverurl",
(this.MouseOverImageUrl != null ?
this.ResolveClientUrl(this.MouseOverImageUrl) :
"imagenotsupplied.gif"));
writer.AddAttribute("mouseouturl",
(this.ImageUrl!= null ?
this.ResolveClientUrl(this.ImageUrl) :
"imagenotsupplied.gif"));
writer.AddAttribute("onmouseover",
"MouseOverImageButton_SwitchImage(this, true);");
writer.AddAttribute("onmouseout",
"MouseOverImageButton_SwitchImage(this, false);");
base.AddAttributesToRender(writer);
}
protected override void OnPreRender(EventArgs e)
{
Utilities.RegisterScript(this, "MouseOverImageButton.js");
base.OnPreRender(e);
}
#endregion
}
}
Utilities.cs (probably have to remove "static" from the class declaration):
#region Using directives
using System;
using System.Collections.Generic;
using System.IO;
using System.Text;
using System.Web.UI;
#endregion
namespace JustWebControls
{
public static class Utilities
{
static Utilities()
{
}
public static void RegisterScript(Control control, string
scriptName)
{
RegisterScripts(control, new string[] { scriptName });
}
public static void RegisterScript(Control control, string
scriptName, string scriptNameSpace)
{
RegisterScripts(control, new string[] { scriptName },
scriptNameSpace);
}
public static void RegisterScripts(Control control, string[]
scriptNames)
{
string controlNamespace = control.GetType().Namespace;
RegisterScripts(control, scriptNames, controlNamespace);
}
public static void RegisterScripts(Control control, string[]
scriptNames, string scriptNameSpace)
{
Type type = control.GetType();
System.Reflection.Assembly assem = type.Assembly;
foreach (string scriptName in scriptNames)
{
string scriptFullName = string.Format("{0}.{1}",
scriptNameSpace, scriptName);
using (Stream scriptStream =
assem.GetManifestResourceStream(scriptFullName))
{
if (scriptStream == null)
{
string message = string.Format("Can't find resource
for script {0}", scriptFullName);
control.Page.Trace.Write(control.ClientID, message);
foreach (string resourceName in
assem.GetManifestResourceNames())
{
control.Page.Trace.Write(control.ClientID,
string.Format("Resource {0} found",
resourceName));
}
throw new ArgumentNullException("scriptName",
message);
}
else
{
using (System.IO.TextReader scriptReader = new
System.IO.StreamReader(scriptStream))
{
string script = scriptReader.ReadToEnd();
control.Page.ClientScript.RegisterClientScriptBlock(type, scriptFullName,
script, true);
}
}
}
}
}
}
}
MouseOverImageButton.js (make it an Embedded Resource in the file
properties):
function MouseOverImageButton_SwitchImage(this_control, over)
{
var mouseOverImage = this_control.mouseoverurl;
var mouseOutImage = this_control.mouseouturl;
if (over)
{
this_control.src = mouseOverImage;
}
else
{
this_control.src = mouseOutImage;
}
}
Example of use:
<%@ Register TagPrefix="cc1" Namespace="JustWebControls"
Assembly="JustWebControls" %>
<script runat="server">
void MouseOverImageButton1_Click(object sender, ImageClickEventArgs e)
{
Label1.Text = string.Format("{0} clicked at ({1}, {2})",
MouseOverImageButton1.ClientID, e.X, e.Y);
}
</script>
<html>
<head></head>
<body>
<form id="form1" runat="server">
<asp:Label runat="server" id="Label1" />
<cc1:MouseOverImageButton ID="MouseOverImageButton1" Runat="server"
ImageUrl="~/Minus.gif" MouseOverImageUrl="~/Plus.gif"
OnClick="MouseOverImageButton1_Click" />
</form>
</body>
</html>
Want to reply to this thread or ask your own question?
You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.