Mouseover effect on imagebutton

[Bendik Engebretsen]

I'm an ASP newbie and have just started experimenting with ASP.NET 2.0 using
the VS.NET 2005 Beta. As a starting point I have used the 'Personal WEB
site' starter kit.

I am now trying to figure out how to make my image buttons come 'alive' with
a mouseover effect. I am used to DHTML and using the mouseover event to
change the bitmap. But what is the correct/best way to do this in ASP.NET ?
Any experienced ASP.NET people who would care to give me some hints here ?

Thanks!
Bendik

 

[Guest]

Hi!

Here is the complete solution:
<asp:ImageButton ID="ibImage" ImageUrl="~/b.jpg" runat="server" />

[...]

protected void Page_Load(object sender, EventArgs e)
{
ibImage.Attributes.Add("onmouseover", "this.src='s.jpg'");
ibImage.Attributes.Add("onmouseout", "this.src='b.jpg'");
}

 

[Bendik Engebretsen]

Thanks Jacek!

This is a little embarassing, but I am so new to ASP.NET that
I couldn't figure out how to use your solution in my project. I tried adding
a Page_Load handler to my Default.aspx.cs file like this

void Page_Load(object sender, EventArgs e)
{
LoginButton.Attributes.Add("onmouseover",
"this.src='Images/button-login_hot.gif'");
LoginButton.Attributes.Add("onmouseout",
"this.src='Images/button-login.gif'");
}

but apparently the LoginButton ID is not recognized here.

As I said I am using ASP.NET 2.0 and the 'Personal WEB site' starter kit as
a base. Maybe the structure is different and I don't understand the whole
story here ?

Anyway, I tried a slightly different approach: I tried adding the
onmouseover and onmouseout events in my .skin file (new ASP.NET 2.0
feature!) like this:

<asp:imagebutton runat="server" Imageurl="Images/button-login.gif"
onmouseover="this.src='Images/button-login_hot.gif'"
onmouseout="this.src='Images/button-login.gif'" skinid="login"/>

Something now happens when I move the cursor over the 'login' button, but I
don't get the correct image - I just get a frame, a red X and the name of
the button 'login'. It seems the image is not found. What could be wrong ?

Bendik

Hi!

Here is the complete solution:
<asp:ImageButton ID="ibImage" ImageUrl="~/b.jpg" runat="server" />

[...]

protected void Page_Load(object sender, EventArgs e)
{
ibImage.Attributes.Add("onmouseover", "this.src='s.jpg'");
ibImage.Attributes.Add("onmouseout", "this.src='b.jpg'");
}



--
C# Dev

I'm an ASP newbie and have just started experimenting with ASP.NET 2.0
using
the VS.NET 2005 Beta. As a starting point I have used the 'Personal WEB
site' starter kit.

I am now trying to figure out how to make my image buttons come 'alive'
with
a mouseover effect. I am used to DHTML and using the mouseover event to
change the bitmap. But what is the correct/best way to do this in ASP.NET
?
Any experienced ASP.NET people who would care to give me some hints here
?

Thanks!
Bendik