In several VB Snippets Web pages, the Web designer has created graphic links or buttons that change color when the cursor passes over them. When you use a graphic for a link or a button, changing the color in this way signals the visitor that the graphic is “live,” which improves the usability of your Web site. Features like this help to distinguish good Web sites from the not so good.

The index.aspx page contains two such graphics, both of which serve as buttons, returning control to the index.aspx page. Figure 15-14 contains a screenshot of the index.aspx page scrolled down to make both buttons visible.

Figure 15-14. The Go button on the index.aspx page changes color to signal that it is a “live” graphic.
Chapter 15, Figure 14.

The MouseoverLink.vb custom control encapsulates the functionality that makes these graphic buttons and links operate. Listing 15-8 contains the code for this control, which exposes four properties. The Culture and ResourceManager properties are used for localization. The Image property identifies the name of the graphic to be displayed, for example, “go” or “log_in”. The Link property identifies the link associated with the graphic, if any. If a link is specified, the custom control outputs HTML that links to that page when the visitor clicks the graphic. If no link is specified, the custom control generates a button that posts back to the page containing the graphic.

Listing 15-8. The MouseoverLink.vb Custom Control

Option Strict On
Imports System.Resources
Imports System.ComponentModel
Imports System.Web.UI

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

    Private _sImage As String = "go"
    Private _sLink As String = String.Empty
    Private _sCulture As String = String.Empty
    Private _WasClicked As Boolean = False
    Private _rm As ResourceManager

    <Bindable(True), Category("Appearance"), DefaultValue("")> _
    Property Image() As String
    Get
        Return _sImage
    End Get
    Set(ByVal Value As String)
        _sImage = Value
    End Set
    End Property

    Property Link() As String
    Get
        Return _sLink
    End Get
    Set(ByVal Value As String)
        _sLink = Value
    End Set
    End Property

    <Bindable(True), Category("Appearance"), DefaultValue("")> _
    Property Culture() As String
    Get
        Return _sCulture
    End Get
    Set(ByVal Value As String)
        _sCulture = Left(Value, 2)
        If _sCulture = "en" Then _sCulture = String.Empty
    End Set
    End Property

    <Bindable(False)> _
    Property ResourceManager() As ResourceManager
    Get
        Return _rm
    End Get
    Set(ByVal Value As ResourceManager)
        _rm = Value
    End Set
    End Property

    ReadOnly Property WasClicked() As Boolean
    Get
        Return _WasClicked
    End Get
    End Property

    Protected Overrides Sub Render(ByVal output As System.Web.UI.HtmlTextWriter)
        If _rm Is Nothing Then
            Throw New Exception("C15_Ctl_Lib-MouseoverButton: " _
                & "No resource manager provided.")
        End If

        'Develop localized image paths
        Dim sImgSrc As String = "images/" & _sImage & "_btn"
        If Not _sCulture = String.Empty Then
            sImgSrc &= "_" & _sCulture
        End If

        Dim sOver As String = "changeImage('" & _sImage & "','','" _
            & sImgSrc & "_over.gif',1)"

        sImgSrc &= ".gif"

        'Move to left margin
        output.WriteLine()

        'Add scripted mouseover events
        output.AddAttribute("onmouseover", sOver)
        output.AddAttribute("onmouseout", "restoreImage()")

        If _sLink = String.Empty Then
            'Link button: add postback event reference
            Dim sScript As String = "javascript:" _
                & Page.GetPostBackEventReference(Me, _sImage)
            output.AddAttribute(HtmlTextWriterAttribute.Href, sScript)
        Else
            'Link to page: add link reference
            output.AddAttribute(HtmlTextWriterAttribute.Href, _sLink)
        End If

        'Render beginning anchor tag
        output.RenderBeginTag(HtmlTextWriterTag.A)

        'Render image for button
        output.AddAttribute(HtmlTextWriterAttribute.Id, _sImage)
        output.AddAttribute(HtmlTextWriterAttribute.Name, _sImage)
        output.AddAttribute(HtmlTextWriterAttribute.Border, "0")
        output.AddAttribute(HtmlTextWriterAttribute.Src, sImgSrc)
        output.AddAttribute(HtmlTextWriterAttribute.Alt, _rm.GetString(_sImage))
        output.AddAttribute(HtmlTextWriterAttribute.Title, 
            _rm.GetString(_sImage))

        'Provide width and height of image to improve browser performance
        Dim sGif As New System.Text.StringBuilder(sImgSrc)
        sImgSrc = sGif.Replace("/", "\").ToString
        Dim bmp As System.Drawing.Bitmap _
            = New System.Drawing.Bitmap(Page.Server.MapPath(sImgSrc))
        output.AddAttribute(HtmlTextWriterAttribute.Width, CStr(bmp.Width))
        output.AddAttribute(HtmlTextWriterAttribute.Height, CStr(bmp.Height))

        'Render img element within anchor element
        output.RenderBeginTag(HtmlTextWriterTag.Img)
        output.RenderEndTag()

        'Render end tag for anchor element
        output.RenderEndTag()
        output.WriteLine()
    End Sub

    Public Sub RaisePostBackEvent(ByVal eventArgument As String) _
    Implements System.Web.UI.IPostBackEventHandler.RaisePostBackEvent
        Debug.Assert(CType(eventArgument, String) = _sImage, _
            "MouseoverLink got incorrect postback")
        _WasClicked = True
    End Sub
End Class

This control makes it easy to add graphical buttons and links to a Web page but, as implemented, it does not stand alone. It requires the support of a JavaScript—rollover.js—provided by the Web designer. The script is identified to the Web page in the HTML head section like this:

<script src="rollover.js" type=text/javascript></script>

It is also important to preload the graphics that will display when the visitor moves the cursor over the original graphic. If you don’t do this, a delay occurs while the browser retrieves the missing graphic. In the index.aspx page, the code to preload the mouseover graphics looks like this:

<script language="javascript">
    <!--
    preloadSwapImages('images/log_in_btn_over.gif','images/go_btn_over.gif')
    //-->
</script>

Finally, the custom control depends upon the naming convention used by the designer for the graphics. For the originally displayed Go button, the image is named go_btn.gif. The mouseover version of the same graphic is named go_btn_over.gif. Thus, the control can construct the filenames for both graphics from the name supplied in the Image property.

The localized versions of the buttons extend the same convention. For example, the French version of the Go button is named go_btn_fr.gif, and its mouseover counterpart is named go_btn_fr_over.gif. The Culture property enables the custom control to construct the required filenames for its localized buttons. Figure 15-15 shows the Spanish versions of the graphical buttons on the index.aspx page. Here, the color of the log_in button shows that the visitor has moved the cursor over it.

Figure 15-15. The MouseoverLink.vb custom control displays localized graphics.
Chapter 15, Figure 15.

One additional point is worth mentioning about this custom control: it is important for performance at the client to specify the height and width attributes of each graphic in its img tag. Of course, the graphics for different languages vary in size, so the custom control determines the height and width of each graphic programmatically and includes those values in the HTML it renders.

Previous: Using Authentication to Vary the Display
Next: Personalizing Web Pages

Home Preview the Book Chapter 15, TOC Part 22