How can I create this type of button?

Discussion in 'ASP .Net' started by Miguel Dias Moura, Dec 23, 2004.

  1. Hello,

    On an ASP.NET/VB web page I have an image button:

    <asp:ImageButton id="btn" ImageUrl="..." Command="..."
    CommandArgument="..."
    CausesValidation="..." OnClick="OnClickMethod" runat="server"/>

    How can I create a rollover effect? Is it possible?

    Thanks,
    Miguel
     
    Miguel Dias Moura, Dec 23, 2004
    #1
    1. Advertising

  2. "Miguel Dias Moura" <md*REMOVE*moura@*NOSPAM*gmail.com> wrote in message
    news:...
    > Hello,
    >
    > On an ASP.NET/VB web page I have an image button:
    >
    > <asp:ImageButton id="btn" ImageUrl="..." Command="..."
    > CommandArgument="..."
    > CausesValidation="..." OnClick="OnClickMethod" runat="server"/>
    >
    > How can I create a rollover effect? Is it possible?


    This has to be done in client-side JavaScript. You'd have an onmouseover
    event handler to start the effect, and an onmouseout event handler to end
    it. You can add these handlers to the button by calling

    btn.Attributes.Add("onmouseover", "domouseover();");
    btn.Attributes.Add("onmouseout", "domouseout();");

    in the Prerender event of the page. You add the script for these two
    functions by using Page.RegisterClientScriptBlock, also in PreRender.

    As to what you do in the two functions, it's whatever you want the rollover
    to look like. Just start the styles the same as domouseout will leave them.

    John Saunders
     
    John Saunders, Dec 23, 2004
    #2
    1. Advertising

  3. Miguel Dias Moura

    Arthur Dent Guest

    You can also put the javascript right in the attribute, then you can very
    easily make your image dynamic if you want base on a database or something
    like that. You can try something like:

    imgBtn.Attributes.Add("onmouseover","javascript:this.src='./images/myimg2.gif'")
    imgBtn.Attributes.Add("onmouseout","javascript:this.src='./images/myimg1.gif'")


    "Miguel Dias Moura" <md*REMOVE*moura@*NOSPAM*gmail.com> wrote in message
    news:...
    > Hello,
    >
    > On an ASP.NET/VB web page I have an image button:
    >
    > <asp:ImageButton id="btn" ImageUrl="..." Command="..."
    > CommandArgument="..."
    > CausesValidation="..." OnClick="OnClickMethod" runat="server"/>
    >
    > How can I create a rollover effect? Is it possible?
    >
    > Thanks,
    > Miguel
    >
     
    Arthur Dent, Dec 23, 2004
    #3
  4. Here's the code for an image rollover button control that I made.

    --
    I hope this helps,
    Steve C. Orr, MCSD, MVP
    http://Steve.Orr.net


    /// <summary>

    /// ImageRolloverButton Control

    /// </summary>

    [DefaultProperty("ImageURL"), ToolboxData(

    "<{0}:ImageRolloverButton " +

    "runat=server></{0}:ImageRolloverButton>")]

    public class ImageRolloverButton :

    System.Web.UI.WebControls.ImageButton

    {

    private string s;

    /// <devdoc>

    /// <para>Gets or sets the URL reference

    /// to the image to display when the mouse

    /// is moved over the image.</para>

    /// </devdoc>

    [Bindable(true), Category("Appearance"),

    DefaultValue(""), Editor(typeof(

    System.Web.UI.Design.ImageUrlEditor), typeof(

    System.Drawing.Design.UITypeEditor))]

    public virtual string RolloverImageUrl

    {

    get

    {

    string s = (string)ViewState["RolloverImageUrl"];

    return((s == null) ? String.Empty : s);

    }

    set

    {

    s=value;

    ViewState["RolloverImageUrl"] = s;

    }

    }

    public override string ImageUrl

    {

    get {return(base.ImageUrl);}

    set {base.ImageUrl=value;}

    }

    protected override void OnPreRender(EventArgs e)

    {

    Attributes.Add("onMouseOver", "this.src=MyImage" +

    this.ClientID);

    Attributes.Add("onMouseOut", "this.src='" +

    base.ImageUrl + "'");

    this.Page.RegisterStartupScript("MyImageKey" +

    this.ClientID,"<script language=javascript>MyImage"

    + this.ClientID + "='" + s + "'</script>");

    base.OnPreRender(e);

    }

    }

    }
     
    Steve C. Orr [MVP, MCSD], Dec 23, 2004
    #4
  5. Miguel Dias Moura

    TJS Guest

    how does this get implemented ?
     
    TJS, Dec 23, 2004
    #5
  6. As a Class Library.

    --
    I hope this helps,
    Steve C. Orr, MCSD, MVP
    http://Steve.Orr.net


    "TJS" <> wrote in message
    news:...
    > how does this get implemented ?
    >
     
    Steve C. Orr [MVP, MCSD], Dec 23, 2004
    #6
  7. Miguel Dias Moura

    TJS Guest

    hmmm, no...
    it doesn't help


    "Steve C. Orr [MVP, MCSD]" <> wrote in message
    news:...
    > As a Class Library.
    >
    > --
    > I hope this helps,
    > Steve C. Orr, MCSD, MVP
    > http://Steve.Orr.net
    >
    >
    > "TJS" <> wrote in message
    > news:...
    >> how does this get implemented ?
    >>

    >
    >
     
    TJS, Dec 23, 2004
    #7
  8. You create a new class library.
    You paste the code.
    You compile it into a DLL.
    You reference the DLL from another project.
    You add the DLL to your toolbox.
    Drag & Drop.

    --
    I hope this helps,
    Steve C. Orr, MCSD, MVP
    http://Steve.Orr.net


    "TJS" <> wrote in message
    news:...
    > hmmm, no...
    > it doesn't help
    >
    >
    > "Steve C. Orr [MVP, MCSD]" <> wrote in message
    > news:...
    >> As a Class Library.
    >>
    >> --
    >> I hope this helps,
    >> Steve C. Orr, MCSD, MVP
    >> http://Steve.Orr.net
    >>
    >>
    >> "TJS" <> wrote in message
    >> news:...
    >>> how does this get implemented ?
    >>>

    >>
    >>

    >
    >
     
    Steve C. Orr [MVP, MCSD], Dec 23, 2004
    #8
  9. Miguel Dias Moura

    TJS Guest

    you must be talking about VS stuff

    I don't use VS
     
    TJS, Dec 26, 2004
    #9
  10. Well then you should be use to doing this kind of thing manually.
    Compile the code into a DLL and use it in another project.
    I suggest using Visual Studio though; it makes things much easier.

    --
    I hope this helps,
    Steve C. Orr, MCSD, MVP
    http://Steve.Orr.net


    "TJS" <> wrote in message
    news:...
    > you must be talking about VS stuff
    >
    > I don't use VS
    >
     
    Steve C. Orr [MVP, MCSD], Dec 27, 2004
    #10
    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. Nathan Sokalski
    Replies:
    1
    Views:
    891
    Gregory A. Beamer
    Jan 11, 2010
  2. Tony WONG
    Replies:
    2
    Views:
    596
    Tony WONG
    Apr 22, 2010
  3. Sam
    Replies:
    1
    Views:
    1,124
    Brian Kenneth Nielsen
    Nov 25, 2008
  4. Nathan Sokalski
    Replies:
    1
    Views:
    815
    Gregory A. Beamer
    Jan 11, 2010
  5. Replies:
    6
    Views:
    254
    The Natural Philosopher
    May 31, 2009
Loading...

Share This Page