Rollover asp.net Button

[Oriane]

Hi there,

I would like to handle a "rollover" <asp:Button> in the code behind with C#
with this kind of code:

Button btn = Page.FindControl("Button" + numWidget) as
Button;
btn.Attributes["onmouseover"] = "document.all." +
btn.ClientID + ".src = '/Images/blue.gif'";

This code works for ImageButton...but not for Button (it does nothing).

My goal is to change the background image.

Best regards

 

[Nathan Sokalski]

It doesn't work for the Button control because the html input tag doesn't
have a src attribute. But can I also ask why you are using a Button control
when you want to assign it a *.gif file? However, if all you are looking to
do is add a rollover feature to the Button that changes the background
color, you may want to take a look at the AddRolloverBackgroundColor
function I have written that is available on my website at:

http://www.nathansokalski.com/code/RolloversClass.aspx

Here is the simple code for the function if you want it separately from the
other rollover functions I have written:

Public Shared Sub AddRolloverBackgroundColor(ByVal ctrl As
System.Web.UI.WebControls.WebControl, ByVal rollover As
System.Drawing.Color, ByVal initial As System.Drawing.Color)
'Adds the background color rollover feature to a WebControl
ctrl.BackColor = initial
ctrl.Attributes.Add("onmouseover",
String.Format("this.style.backgroundColor='{0}';",
System.Drawing.ColorTranslator.ToHtml(rollover)))
ctrl.Attributes.Add("onmouseout",
String.Format("this.style.backgroundColor='{0}';",
System.Drawing.ColorTranslator.ToHtml(initial)))
End Sub

As you can see, my code is in VB.NET, but you can obviously convert it into
C# without much trouble. Good Luck!

 

[Oriane]

Hi Nathan,

It doesn't work for the Button control because the html input tag doesn't
have a src attribute. But can I also ask why you are using a Button
control when you want to assign it a *.gif file?

I want to be able to write OK/KO (or something else of course) in the
button from the C# code, and I'm looking for a 3D effect. If your question
is : why I don't use the background color attribute, it is because the gif
file gives the 3D effect (it's a plain rectangle with shadow on the
corners). Optionaly, I want the button to change color when the mouse is
above it or when the user clicks it.

However, if all you are looking to do is add a rollover feature to the
Button that changes the background color, you may want to take a look at
the AddRolloverBackgroundColor function I have written that is available
on my website at:

Ok I will have a look. I'm achieving a web site and my boss wnats something
"sexy and professional" :-( I'm not a Web designer and I'm struggling with
CSS, skinID, attributes... just to have nice button, imagebutton and
dropdown list... I find the basic button quite flat and now that Silverlight
and Flash techniques spread everywhere, clients are asking for more and more
sophisticated design :-(((

Best regards

 

[Nathan Sokalski]

Here's something a coworker of mine used that worked and allowed me to set
the text by setting the Button's Text property:

<asp:Button ID="btnBlue" runat="server" Text="Blue Button"
style="background-image: url(/Images/blue.gif);" EnableViewState="false"/>

You will probably want to create a CSS class to do this so you can apply the
same background to all your buttons, and so the text color is appropriate
for the background, but anyway, I found this to work great because it was
almost like an ImageButton but I was still able to set the text using the
Text property. As for changing the color during rollovers, you can either
use the CSS :hover pseudo-class or use JavaScript to change the class or
style attribute. Good Luck!

 

[Steven Cheng]

Hi Oriane,

The ImageButton and Button differs on their underlying html representation.
You can view the html source of the asp.net page to verify that.

I agree with Nathan that you can try using javascript to change the
style.backgroundColor or style.backgroundImage attribute to acheive the
same goal.

http://bytes.com/forum/thread517432.html

http://www.webdeveloper.com/forum/archive/index.php/t-55226.html


Sincerely,

Steven Cheng

Microsoft MSDN Online Support Lead


Delighting our customers is our #1 priority. We welcome your comments and
suggestions about how we can improve the support we provide to you. Please
feel free to let my manager know what you think of the level of service
provided. You can send feedback directly to my manager at:
(e-mail address removed).

==================================================
Get notification to my posts through email? Please refer to
http://msdn.microsoft.com/en-us/subscriptions/aa948868.aspx#notifications.
==================================================
This posting is provided "AS IS" with no warranties, and confers no rights.

--------------------

From: "Oriane" <[email protected]>
Subject: Rollover asp.net Button
Date: Tue, 30 Sep 2008 18:35:06 +0200

Hi there,

I would like to handle a "rollover" <asp:Button> in the code behind with C#
with this kind of code:

Button btn = Page.FindControl("Button" + numWidget) as
Button;
btn.Attributes["onmouseover"] = "document.all." +
btn.ClientID + ".src = '/Images/blue.gif'";

This code works for ImageButton...but not for Button (it does nothing).

My goal is to change the background image.

Best regards

 

[Oriane]

Thanks for your answer