image button rollover

Discussion in 'ASP .Net' started by smokeyd, Mar 14, 2007.

  1. smokeyd

    smokeyd Guest

    i am trying to create a simple image button rollover.. i have
    searched this forum and found a number of solutions but none seem to
    work. i am just trying to get the onmouseover to swap the image then
    restore when rolled out on a web page in vb.net. please can someone
    help?
     
    smokeyd, Mar 14, 2007
    #1
    1. Advertising

  2. smokeyd

    Mike Hofer Guest

    On Mar 14, 6:25 am, "smokeyd" <> wrote:
    > i am trying to create a simple image button rollover.. i have
    > searched this forum and found a number of solutions but none seem to
    > work. i am just trying to get the onmouseover to swap the image then
    > restore when rolled out on a web page in vb.net. please can someone
    > help?


    I did it on the server side, while I was setting up the page. Most of
    my pages have an OK button and a Cancel button. For consistency's
    sake, the images are all named the same. That is, the standard buttons
    end in ".jpg" and the hover style ends in "_hover.jpg".

    We use ImageButton controls to represent buttons so that we can
    respond to click events server-side. When I'm designing the form, I
    always only set the ImageUrl property, and I always only set it to the
    *unhovered* image.

    I wrote a method in the page's base class called SetButtonImages, that
    looks something like this:

    Protected Sub SetButtonImages(ByVal button As ImageButton)

    Dim imageUrl As String

    imageUrl = button.imageUrl

    ' Set the image that appears when the user moves the mouse off
    ' of the button.
    image.Attributes.Add("onmouseout", "src=""" & imageUrl & """")

    ' Remove the .jpg extension, and add the "_hover.jpg" extension
    imageUrl = imageUrl.SubString(0, imageUrl.Length - 4)
    imageUrl &= "_hover.jpg"

    ' Set the image that appears when the user hovers the mouse
    ' over the image button.
    button.Attributes.Add("onmouseover", "src=""" & imageUrl & """")

    End Sub

    (WARNING: I'm recalling this from memory, since the boss just tweaked
    our firewall, and I can't peak at the source code to refresh my
    memory, so I'm sorry if there are bugs.)

    The method is invoked in the derived pages, like this:

    Protected Sub PageLoad(ByVal sender As Object, ByVal e As EventArgs)
    Handles Page.Load
    ...
    SetButtonImages(btnOk)
    SetButtonImages(btnCancel)
    End Sub

    This implementation saved me a lot of time, but it's based on a base
    class for your pages. If you're not using a base class, you can simply
    put the SetButtonImages function in a sepraate class, or even in a
    module and invoke it from there (so that you don't have to repeat it
    in every page). Once you have that method working the way you want it
    to, it becomes highly reusable. You can change the file extension to
    match whatever image types or file names you're using.

    The caveat, of course, is that you have a consistent image naming
    scheme. You can, of course, change the arguments to the method to pass
    in the names of the images. That simplifies the entire task, and is
    likely far more reliable if your file names aren't consistent. (A lack
    of consistency doesn't mean anything--it's a frequent phenomenon, and
    just indicates that the images likely came from disparate sources.)

    I hope this helps!

    Mike
     
    Mike Hofer, Mar 14, 2007
    #2
    1. Advertising

  3. smokeyd

    smokeyd Guest

    On 14 Mar, 10:58, "Mike Hofer" <> wrote:
    > On Mar 14, 6:25 am, "smokeyd" <> wrote:
    >
    > > i am trying to create a simple image button rollover.. i have
    > > searched this forum and found a number of solutions but none seem to
    > > work. i am just trying to get the onmouseover to swap the image then
    > > restore when rolled out on a web page in vb.net. please can someone
    > > help?

    >
    > I did it on the server side, while I was setting up the page. Most of
    > my pages have an OK button and a Cancel button. For consistency's
    > sake, the images are all named the same. That is, the standard buttons
    > end in ".jpg" and the hover style ends in "_hover.jpg".
    >
    > We use ImageButton controls to represent buttons so that we can
    > respond to click events server-side. When I'm designing the form, I
    > always only set the ImageUrl property, and I always only set it to the
    > *unhovered* image.
    >
    > I wrote a method in the page's base class called SetButtonImages, that
    > looks something like this:
    >
    > Protected Sub SetButtonImages(ByVal button As ImageButton)
    >
    > Dim imageUrl As String
    >
    > imageUrl = button.imageUrl
    >
    > ' Set the image that appears when the user moves the mouse off
    > ' of the button.
    > image.Attributes.Add("onmouseout", "src=""" & imageUrl & """")
    >
    > ' Remove the .jpg extension, and add the "_hover.jpg" extension
    > imageUrl = imageUrl.SubString(0, imageUrl.Length - 4)
    > imageUrl &= "_hover.jpg"
    >
    > ' Set the image that appears when the user hovers the mouse
    > ' over the image button.
    > button.Attributes.Add("onmouseover", "src=""" & imageUrl & """")
    >
    > End Sub
    >
    > (WARNING: I'm recalling this from memory, since the boss just tweaked
    > our firewall, and I can't peak at the source code to refresh my
    > memory, so I'm sorry if there are bugs.)
    >
    > The method is invoked in the derived pages, like this:
    >
    > Protected Sub PageLoad(ByVal sender As Object, ByVal e As EventArgs)
    > Handles Page.Load
    > ...
    > SetButtonImages(btnOk)
    > SetButtonImages(btnCancel)
    > End Sub
    >
    > This implementation saved me a lot of time, but it's based on a base
    > class for your pages. If you're not using a base class, you can simply
    > put the SetButtonImages function in a sepraate class, or even in a
    > module and invoke it from there (so that you don't have to repeat it
    > in every page). Once you have that method working the way you want it
    > to, it becomes highly reusable. You can change the file extension to
    > match whatever image types or file names you're using.
    >
    > The caveat, of course, is that you have a consistent image naming
    > scheme. You can, of course, change the arguments to the method to pass
    > in the names of the images. That simplifies the entire task, and is
    > likely far more reliable if your file names aren't consistent. (A lack
    > of consistency doesn't mean anything--it's a frequent phenomenon, and
    > just indicates that the images likely came from disparate sources.)
    >
    > I hope this helps!
    >
    > Mike


    works a treat!

    thanks very much for that mike, it works great. cant beleive it is so
    difficult in .net though!

    many thanks for your help.
     
    smokeyd, Mar 14, 2007
    #3
    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. VB Programmer

    Login "rollover" button question

    VB Programmer, Jun 9, 2004, in forum: ASP .Net
    Replies:
    0
    Views:
    426
    VB Programmer
    Jun 9, 2004
  2. Blake

    CSS Button Rollover Effects

    Blake, Jun 30, 2004, in forum: ASP .Net
    Replies:
    3
    Views:
    4,130
    jazz831
    May 18, 2011
  3. thechaosengine

    Creating a 3 State Rollover Button

    thechaosengine, Apr 18, 2005, in forum: ASP .Net
    Replies:
    1
    Views:
    1,139
    Bruce Barker
    Apr 18, 2005
  4. Mark Szlazak
    Replies:
    3
    Views:
    193
    Fletch
    Apr 25, 2006
  5. Dan
    Replies:
    3
    Views:
    136
Loading...

Share This Page