Mouseover effect on imagebutton

Discussion in 'ASP .Net' started by Bendik Engebretsen, Aug 3, 2005.

  1. 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
     
    Bendik Engebretsen, Aug 3, 2005
    #1
    1. Advertising

  2. 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" wrote:

    > 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
    >
    >
    >
     
    =?Utf-8?B?SmFjZWsgU3Rhd2lja2k=?=, Aug 3, 2005
    #2
    1. Advertising

  3. 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" <> wrote in message
    news:...
    > 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" wrote:
    >
    >> 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
    >>
    >>
    >>
     
    Bendik Engebretsen, Aug 3, 2005
    #3
  4. Bendik Engebretsen

    shadowzz

    Joined:
    Sep 2, 2010
    Messages:
    2
    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.
     
    shadowzz, Sep 2, 2010
    #4
    1. Advertising

Want to reply to this thread or ask your own question?

It takes just 2 minutes to sign up (and it's free!). Just click the sign up button to choose a username and then you can ask your own questions on the forum.
Similar Threads
  1. =?Utf-8?B?QUNhdW50ZXI=?=

    mouseOver effect

    =?Utf-8?B?QUNhdW50ZXI=?=, Feb 1, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    479
    Gopal \(FMS, Inc.\)
    Feb 1, 2005
  2. Chris
    Replies:
    0
    Views:
    574
    Chris
    Aug 3, 2005
  3. Dariusz Tomon
    Replies:
    2
    Views:
    892
  4. Larry

    Mouseover effect

    Larry, Oct 31, 2004, in forum: HTML
    Replies:
    5
    Views:
    530
  5. Bart

    mouseover effect

    Bart, Jan 5, 2005, in forum: ASP .Net Datagrid Control
    Replies:
    1
    Views:
    169
    R. Thomas, aka Xtreme.Net
    Jan 7, 2005
Loading...

Share This Page