Written by: Steve Patterson
6/9/2009 12:33 PM 

Creating Image Buttons that Resize on Mouse Over

We needed to have a different way than previously designed to have image buttons enlarge on hover over that included a text label. So I wrote the code below to fill a table cell with an image and change the image onmouseover. The trick was getting the label to sit right on top on the images and having the images swap correctly. I used a div area to push the label down to the right spot on the image. And then I used some css style attributes in JavaScript to get the image to change when needed.

First the Markup Page:

<table cellpadding="0" cellspacing="0" width="226">
<tr>    
    <td align="center" valign="bottom" width="226" height="101" 
        style="background-image: iamamemberofthemedia.png; background-repeat: no-repeat;" 
        id="tdImage" runat="server" >
        <asp:LinkButton ID="btnHeader" runat="server" Height="91" Width="204" CssClass="image_overlay">
        asp:LinkButton>
        <div style="height:4px; cursor:hand;"> div>
    td>    
tr>
table>

The Code Behind:

    Private _NavigateURL As String = String.Empty
    Public Property NavigateURL() As String
        Get
            Return Me._NavigateURL
        End Get
        Set(ByVal value As String)
            Me._NavigateURL = value
        End Set
    End Property

    Public Property HeaderText() As String
        Get
            Return Me.btnHeader.Text.Replace("
", "")
        End Get
        Set(ByVal value As String)
            Me.btnHeader.Text = "
" & value
        End Set
    End Property

    Public Property ImageURL() As String
        Get
            Return Me.tdImage.Attributes.CssStyle.Item("background-image")
        End Get
        Set(ByVal value As String)
            Me.tdImage.Attributes.CssStyle.Clear()
            Me.tdImage.Attributes.CssStyle.Add("background-image", ResolveUrl(value))
            Me.tdImage.Attributes.CssStyle.Add("background-repeat", "no-repeat")
            Me.tdImage.Attributes.CssStyle.Add("background-position", "center center")
            Me.tdImage.Attributes.Add("onmouseout", 
            "this.style.backgroundImage='url(" & ResolveUrl(value) & ")';
            this.style.backgroundRepeat='no-repeat'; 
            this.style.backgroundPosition='center center'")
        End Set
    End Property

    Public WriteOnly Property HoverImageURL() As String
        Set(ByVal value As String)
            Me.tdImage.Attributes.Add("onmouseover", 
            "this.style.backgroundImage='url(" & ResolveUrl(value) & ")'; 
            this.style.backgroundRepeat='no-repeat'; this.style.backgroundPosition='center center'")
        End Set
    End Property

    Public Sub Navigate()
        Response.Redirect(Me.NavigateURL)
    End Sub

    Protected Sub btnHeader_Click(ByVal sender As Object, ByVal e As System.EventArgs) 
            Handles btnHeader.Click
        Me.Navigate()
    End Sub

Trackback Print

Tags:

Categories:

Location: Blogs CapturedTech - Technology

Your name:
Your email:
	(Optional) Email used only to show Gravatar.
Your website:
Title:
Comment:
Security Code Enter the code shown above in the box below
Add Comment   Cancel