Captured Technology

Creating Image Buttons that Resize on Mouse Over

Jun 09 2009

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

Blog Directory

Latest technology news.
 Steve Patterson
 411  245414  5/16/2017

FaceBook

Translate

Sponsors





Blog Calendar

Categories