Add mouseover underline and hand-cursor to custom web control

Posted on 2004-11-22
Last Modified: 2008-02-26
I am trying to modify a label control for a webform, to act as a psuedo-hyperlink.  I want to be able to click on it and it call functions from my code-behind.

Platinumbaby proposed this creative solution and it works very well for me:

That question is closed and I would like to extend its functionality to include a mouseover that would underline the object's font and change the cursor to a hand.

Question by:carlajasminelewis
    LVL 6

    Expert Comment

    As I suggested, I would use CSS styles to do that.

    Something similar to:
    .text{font:10px verdana,helvetica,arial;text-decoration:none;cursor:pointer;}
    a.text:link{font:10px verdana,helvetica,arial;text-decoration:none;color:#666699;cursor:hand;}
    a.text:visited{font:10px verdana,helvetica,arial;text-decoration:none;color:#333366;cursor:hand;}
    a.text:hover{font:10px verdana,helvetica,arial;text-decoration:underline;color:#666699;cursor:hand}

    However, you could programtically add those styles to the CustomWebControl.  I'll have some code for that shortly.
    LVL 1

    Author Comment

    Great...I can't wait (seriously) :-)
    LVL 6

    Accepted Solution

    Sorry it took so long, my javascript is a little rusty, but I'm sure my neighbors know I just got it to work :)
    It will automatically underline and give the hand cursor (may be IE only) on mouseover, and clear to default on mouseout.

    Imports System.ComponentModel
    Imports System.Web.UI
    Imports System.Drawing

    <DefaultProperty("Text"), ToolboxData("<{0}:PBClickLabel runat=server></{0}:PBClickLabel>")> _
    Public Class PBClickLabel
        Inherits System.Web.UI.WebControls.Label
        Implements IPostBackEventHandler

        Public Event Click As EventHandler

        Public Sub New()
        End Sub

        Protected Overrides Sub AddAttributesToRender(ByVal writer As System.Web.UI.HtmlTextWriter)
            writer.AddAttribute(HtmlTextWriterAttribute.Onclick, "javascript:" & Page.GetPostBackEventReference(Me))
            writer.AddAttribute(HtmlTextWriterAttribute.Class, "PBClickLabelOut")
            If MyBase.CssClass = "" Then
                writer.AddAttribute("onmouseover", "this.className='PBClickLabelOver';")
                writer.AddAttribute("onmouseout", "this.className='PBClickLabelOut';")
            End If
        End Sub

        Protected Overridable Sub onClick(ByVal e As EventArgs)
            RaiseEvent Click(Me, e)
        End Sub

        Public Sub RaisePostBackEvent(ByVal args As String) Implements System.Web.UI.IPostBackEventHandler.RaisePostBackEvent
        End Sub

        Public Overrides Sub RenderBeginTag(ByVal writer As System.Web.UI.HtmlTextWriter)
            writer.WriteLine(".PBClickLabelOut { cursor: auto; text-decoration: none; }")
            writer.WriteLine(".PBClickLabelOver { cursor: hand; text-decoration: underline; }")
        End Sub
    End Class
    LVL 1

    Author Comment

    You're the bomb; and your code it straightforward enough that I actually learned something.  Thanks for your effort!
    LVL 6

    Expert Comment

    Knowing how to use WebCustomControls is a very cool thing, you can do a lot to extend the base controls, and they have been lifesends for me in the past.  Glad I could help, and glad you learned something.

    Featured Post

    Highfive + Dolby Voice = No More Audio Complaints!

    Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

    Join & Write a Comment

    Introduction When many people think of the WebBrowser ( control, they immediately think of a control which allows the viewing and navigation of web pages. While this is true, it's a…
    It’s quite interesting for me as I worked with Excel using for some time. Here are some topics which I know want to share with others whom this might help. First of all if you are working with Excel then you need to Download the Following …
    In this seventh video of the Xpdf series, we discuss and demonstrate the PDFfonts utility, which lists all the fonts used in a PDF file. It does this via a command line interface, making it suitable for use in programs, scripts, batch files — any pl…
    Access reports are powerful and flexible. Learn how to create a query and then a grouped report using the wizard. Modify the report design after the wizard is done to make it look better. There will be another video to explain how to put the final p…

    728 members asked questions and received personalized solutions in the past 7 days.

    Join the community of 500,000 technology professionals and ask your questions.

    Join & Ask a Question

    Need Help in Real-Time?

    Connect with top rated Experts

    18 Experts available now in Live!

    Get 1:1 Help Now