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