• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 735
  • Last Modified:

Add mouseover underline and hand-cursor to custom web control

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:
http://www.experts-exchange.com/Programming/Programming_Languages/Dot_Net/VB_DOT_NET/Q_21215296.html#12641646

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.

0
carlajasminelewis
Asked:
carlajasminelewis
  • 3
  • 2
1 Solution
 
platinumbayCommented:
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.
0
 
carlajasminelewisAuthor Commented:
Great...I can't wait (seriously) :-)
0
 
platinumbayCommented:
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
        MyBase.AddAttributesToRender(writer)
    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
        onClick(EventArgs.Empty)
    End Sub

    Public Overrides Sub RenderBeginTag(ByVal writer As System.Web.UI.HtmlTextWriter)
        writer.WriteLine("<style>")
        writer.WriteLine(".PBClickLabelOut { cursor: auto; text-decoration: none; }")
        writer.WriteLine(".PBClickLabelOver { cursor: hand; text-decoration: underline; }")
        writer.WriteLine("</style>")
        MyBase.RenderBeginTag(writer)
    End Sub
End Class
0
 
carlajasminelewisAuthor Commented:
You're the bomb; and your code it straightforward enough that I actually learned something.  Thanks for your effort!
0
 
platinumbayCommented:
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.
0

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 3
  • 2
Tackle projects and never again get stuck behind a technical roadblock.
Join Now