Image Rollovers with the Hyperlink Control

Discussion in 'ASP .Net Building Controls' started by Nathan Sokalski, Feb 18, 2006.

  1. I have several System.Web.UI.WebControls.HyperLink Controls which I want to
    display as rollover images. I know how to make these manually using the <a>
    and <img> tags or the <a> tag and a System.Web.UI.WebControls.Image Control
    or a HyperLink and Image Controls, but the onMouseOver and onMouseOut
    attributes must be in the <img> tag. If I were to use the HyperLink's
    ImageUrl property and add the attributes using the
    HyperLink.Attributes.Add() method, I am assuming the attributes will appear
    in the generated <a> tag. Is there a way to create a Hyperlink Rollover
    without creating two Controls? Thanks.
    --
    Nathan Sokalski

    http://www.nathansokalski.com/
     
    Nathan Sokalski, Feb 18, 2006
    #1
    1. Advertising

  2. Nathan Sokalski

    Kris Guest

    Hi Nathan,

    Yes. You need not create two controls.

    In HyperLink you have a property called ImageUrl. Use this property to
    assign the image location.

    Cheers,
    Kris
     
    Kris, Feb 18, 2006
    #2
    1. Advertising

  3. Hi,

    I usually use the 2 controls. I try and make the image have a
    transparent background. That way when the mouse passes over the hyperlink
    the color changes and I dont have to change the image.

    The new asp.net 2.0 menu control does a lot of what you are looking
    for but I dont know if it work in your application.

    Ken
    -----------------

    Ken
    -----------------------
    "Nathan Sokalski" <> wrote in message
    news:uf$...
    >I have several System.Web.UI.WebControls.HyperLink Controls which I want to
    >display as rollover images. I know how to make these manually using the <a>
    >and <img> tags or the <a> tag and a System.Web.UI.WebControls.Image Control
    >or a HyperLink and Image Controls, but the onMouseOver and onMouseOut
    >attributes must be in the <img> tag. If I were to use the HyperLink's
    >ImageUrl property and add the attributes using the
    >HyperLink.Attributes.Add() method, I am assuming the attributes will appear
    >in the generated <a> tag. Is there a way to create a Hyperlink Rollover
    >without creating two Controls? Thanks.
    > --
    > Nathan Sokalski
    >
    > http://www.nathansokalski.com/
    >
     
    Ken Tucker [MVP], Feb 18, 2006
    #3
  4. Nathan i remember i posted something similar too as i had to fix it up for a
    client and you made some sugesstions.
    What i did was supposeing you have an hyperlink and and image control like
    below in a repaeater etc..

    <asp:Image id="Image1" runat="server" name="Image1"
    ImageUrl="images/off.gif"></asp:Image>
    <asp:HyperLink Tooltip='<%#
    DataBinder.Eval(Container.DataItem, "sample") %>'
    Cssclass="txtmenu" id="HyperLink1" runat="server" />

    You can add the image on mouseover by adding this in your ItemDataBound like
    below

    If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType =
    ListItemType.AlternatingItem Then
    Dim hyperLink As HyperLink =
    CType(e.Item.FindControl("HyperLink1"), HyperLink)
    Dim Image As System.Web.UI.WebControls.Image =
    CType(e.Item.FindControl("Image1"), System.Web.UI.WebControls.Image)

    hyperLink.Attributes.Add("onMouseOver", Image.ClientID &
    ".src='images/on.gif;return true;")
    hyperLink.Attributes.Add("onMouseOut", Image.ClientID &
    ".src='images/off.gif'; return true;")

    End If

    And that did the trick..
    Hope that helps
    ** If you need more info let me know.
    Patrick

    "Nathan Sokalski" <> wrote in message
    news:uf$...
    >I have several System.Web.UI.WebControls.HyperLink Controls which I want to
    >display as rollover images. I know how to make these manually using the <a>
    >and <img> tags or the <a> tag and a System.Web.UI.WebControls.Image Control
    >or a HyperLink and Image Controls, but the onMouseOver and onMouseOut
    >attributes must be in the <img> tag. If I were to use the HyperLink's
    >ImageUrl property and add the attributes using the
    >HyperLink.Attributes.Add() method, I am assuming the attributes will appear
    >in the generated <a> tag. Is there a way to create a Hyperlink Rollover
    >without creating two Controls? Thanks.
    > --
    > Nathan Sokalski
    >
    > http://www.nathansokalski.com/
    >
     
    Patrick.O.Ige, Feb 18, 2006
    #4
  5. Nathan Sokalski

    Darren Kopp Guest

    Ever thought about making a custom control? I know I made one to make
    a link button with an image, inheriting from the link button class. It
    wouldn't be too hard to do that with the hyperlink class and just have
    properties linkimage and hoverimage. then you create a javascript to
    swap the images. In your control you could then check if the script
    has been registered, if not register it with the page. This way you
    can use the same script with as many controls as you want.

    This can help encapsulate your code a little better and maybe make your
    life a bit easier :)

    HTH,
    Darren Kopp
    http://blog.secudocs.com
     
    Darren Kopp, Feb 18, 2006
    #5
  6. I have thought about that, and someday I probably will, but right now I do
    not have enough experience with making custom controls Design View friendly
    that I want to do that with this. I have written custom controls in the
    past, but am still studying and learning how to make their properties
    visible in the places I want (such as the properties palette). Almost
    everything I know about ASP.NET has been either self-taught from
    books/websites or learned from people in newsgroups, none of the
    universities I have attended seem to be big on .NET (if at all) yet.
    --
    Nathan Sokalski

    http://www.nathansokalski.com/

    "Darren Kopp" <> wrote in message
    news:...
    > Ever thought about making a custom control? I know I made one to make
    > a link button with an image, inheriting from the link button class. It
    > wouldn't be too hard to do that with the hyperlink class and just have
    > properties linkimage and hoverimage. then you create a javascript to
    > swap the images. In your control you could then check if the script
    > has been registered, if not register it with the page. This way you
    > can use the same script with as many controls as you want.
    >
    > This can help encapsulate your code a little better and maybe make your
    > life a bit easier :)
    >
    > HTH,
    > Darren Kopp
    > http://blog.secudocs.com
    >
     
    Nathan Sokalski, Feb 18, 2006
    #6
  7. You seem to have misunderstood my problem. I know how to assign an image to
    a HyperLink, but I need to make that image a rollover, and I want to use
    only one Control.
    --
    Nathan Sokalski

    http://www.nathansokalski.com/

    "Kris" <> wrote in message
    news:...
    > Hi Nathan,
    >
    > Yes. You need not create two controls.
    >
    > In HyperLink you have a property called ImageUrl. Use this property to
    > assign the image location.
    >
    > Cheers,
    > Kris
    >
     
    Nathan Sokalski, Feb 18, 2006
    #7
  8. The code you give adds the onMouseOver and onMouseOut to the <a> tag, not
    the <img> tag. Because of this, the rollover does not work.
    --
    Nathan Sokalski

    http://www.nathansokalski.com/

    "Patrick.O.Ige" <> wrote in message
    news:%...
    > Nathan i remember i posted something similar too as i had to fix it up for
    > a client and you made some sugesstions.
    > What i did was supposeing you have an hyperlink and and image control
    > like below in a repaeater etc..
    >
    > <asp:Image id="Image1" runat="server" name="Image1"
    > ImageUrl="images/off.gif"></asp:Image>
    > <asp:HyperLink Tooltip='<%#
    > DataBinder.Eval(Container.DataItem, "sample") %>'
    > Cssclass="txtmenu" id="HyperLink1" runat="server" />
    >
    > You can add the image on mouseover by adding this in your ItemDataBound
    > like below
    >
    > If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType =
    > ListItemType.AlternatingItem Then
    > Dim hyperLink As HyperLink =
    > CType(e.Item.FindControl("HyperLink1"), HyperLink)
    > Dim Image As System.Web.UI.WebControls.Image =
    > CType(e.Item.FindControl("Image1"), System.Web.UI.WebControls.Image)
    >
    > hyperLink.Attributes.Add("onMouseOver", Image.ClientID &
    > ".src='images/on.gif;return true;")
    > hyperLink.Attributes.Add("onMouseOut", Image.ClientID &
    > ".src='images/off.gif'; return true;")
    >
    > End If
    >
    > And that did the trick..
    > Hope that helps
    > ** If you need more info let me know.
    > Patrick
    >
    > "Nathan Sokalski" <> wrote in message
    > news:uf$...
    >>I have several System.Web.UI.WebControls.HyperLink Controls which I want
    >>to display as rollover images. I know how to make these manually using the
    >><a> and <img> tags or the <a> tag and a System.Web.UI.WebControls.Image
    >>Control or a HyperLink and Image Controls, but the onMouseOver and
    >>onMouseOut attributes must be in the <img> tag. If I were to use the
    >>HyperLink's ImageUrl property and add the attributes using the
    >>HyperLink.Attributes.Add() method, I am assuming the attributes will
    >>appear in the generated <a> tag. Is there a way to create a Hyperlink
    >>Rollover without creating two Controls? Thanks.
    >> --
    >> Nathan Sokalski
    >>
    >> http://www.nathansokalski.com/
    >>

    >
    >
     
    Nathan Sokalski, Feb 18, 2006
    #8
  9. Nathan if you are interested in the img
    Try loooking at :-
    http://aspnet.4guysfromrolla.com/articles/091703-1.aspx
    or
    http://aspalliance.com/317
    Hope that helps
    Patrick


    "Nathan Sokalski" <> wrote in message
    news:...
    > The code you give adds the onMouseOver and onMouseOut to the <a> tag, not
    > the <img> tag. Because of this, the rollover does not work.
    > --
    > Nathan Sokalski
    >
    > http://www.nathansokalski.com/
    >
    > "Patrick.O.Ige" <> wrote in message
    > news:%...
    >> Nathan i remember i posted something similar too as i had to fix it up
    >> for a client and you made some sugesstions.
    >> What i did was supposeing you have an hyperlink and and image control
    >> like below in a repaeater etc..
    >>
    >> <asp:Image id="Image1" runat="server" name="Image1"
    >> ImageUrl="images/off.gif"></asp:Image>
    >> <asp:HyperLink Tooltip='<%#
    >> DataBinder.Eval(Container.DataItem, "sample") %>'
    >> Cssclass="txtmenu" id="HyperLink1" runat="server" />
    >>
    >> You can add the image on mouseover by adding this in your ItemDataBound
    >> like below
    >>
    >> If e.Item.ItemType = ListItemType.Item OrElse e.Item.ItemType =
    >> ListItemType.AlternatingItem Then
    >> Dim hyperLink As HyperLink =
    >> CType(e.Item.FindControl("HyperLink1"), HyperLink)
    >> Dim Image As System.Web.UI.WebControls.Image =
    >> CType(e.Item.FindControl("Image1"), System.Web.UI.WebControls.Image)
    >>
    >> hyperLink.Attributes.Add("onMouseOver", Image.ClientID &
    >> ".src='images/on.gif;return true;")
    >> hyperLink.Attributes.Add("onMouseOut", Image.ClientID &
    >> ".src='images/off.gif'; return true;")
    >>
    >> End If
    >>
    >> And that did the trick..
    >> Hope that helps
    >> ** If you need more info let me know.
    >> Patrick
    >>
    >> "Nathan Sokalski" <> wrote in message
    >> news:uf$...
    >>>I have several System.Web.UI.WebControls.HyperLink Controls which I want
    >>>to display as rollover images. I know how to make these manually using
    >>>the <a> and <img> tags or the <a> tag and a
    >>>System.Web.UI.WebControls.Image Control or a HyperLink and Image
    >>>Controls, but the onMouseOver and onMouseOut attributes must be in the
    >>><img> tag. If I were to use the HyperLink's ImageUrl property and add the
    >>>attributes using the HyperLink.Attributes.Add() method, I am assuming the
    >>>attributes will appear in the generated <a> tag. Is there a way to create
    >>>a Hyperlink Rollover without creating two Controls? Thanks.
    >>> --
    >>> Nathan Sokalski
    >>>
    >>> http://www.nathansokalski.com/
    >>>

    >>
    >>

    >
    >
     
    Patrick.O.Ige, Feb 19, 2006
    #9
    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. Les Caudle
    Replies:
    0
    Views:
    332
    Les Caudle
    Apr 10, 2004
  2. Nathan Sokalski

    Image Rollovers with the Hyperlink Control

    Nathan Sokalski, Feb 18, 2006, in forum: ASP .Net
    Replies:
    8
    Views:
    8,839
    Patrick.O.Ige
    Feb 19, 2006
  3. Shahid Juma

    Rollovers over a hotspot image

    Shahid Juma, May 12, 2004, in forum: HTML
    Replies:
    0
    Views:
    585
    Shahid Juma
    May 12, 2004
  4. Jeanne D

    Image swapping/Rollovers

    Jeanne D, Oct 23, 2005, in forum: HTML
    Replies:
    6
    Views:
    484
    dorayme
    Oct 25, 2005
  5. RS
    Replies:
    2
    Views:
    547
    Neredbojias
    Jan 18, 2008
Loading...

Share This Page