Mouseover effect on imagebutton

  • Thread starter Bendik Engebretsen
  • Start date
B

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
 
G

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'");
}
 
B

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

Jacek Stawicki said:
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


Bendik Engebretsen said:
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
 
Joined
Sep 2, 2010
Messages
2
Reaction score
0
The ImageButton class does not have onmouseover and onmouseout properties so adding those in the tag will most likely not work.
The reason why you cannot access the ImageButton is because you did not set it's ID property so it has been given a random one.

<asp:imagebutton ID="LoginButton" runat="server" Imageurl="Images/button-login.gif" />

This is how it should look.
 

Ask a Question

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.

Ask a Question

Members online

Forum statistics

Threads
473,744
Messages
2,569,484
Members
44,903
Latest member
orderPeak8CBDGummies

Latest Threads

Top