Hover effect on input type=image element


I was thinking about putting a hover effect on ASP .NET’s Imagebutton Control and well, first thing I did is that I found out what it gets rendered into. So I found out that it gets rendered into an input type=image Html tag. I used a technique of putting a hover effect with sprite images. It’s just that you put an image that actually has two images for the two states of the button, one for the hover mouse state and one for the normal state. And through CSS you just change the value of margin-top value of the div that contains that input tag and it gives the effect of a hovering image. Below is the CSS, the sample image and the HTML code for you.

#backbutton
{ cursor:pointer;
height:34px;

_height:34px; /*for IE 7 only*/

overflow:hidden;
width:99px;
}

#backbutton:hover input
{
margin-top:-33px;
}
#nextbutton
{
cursor:pointer;
height:33px;
overflow:hidden;
width:99;
}

#nextbutton:hover input
{
margin-top:-33px;
}
#nextbutton:hover img
{
margin-top:-33px;
}


<table cellspacing=”5″>
<tr>
<td>
<div id=”backbutton”>
<input type=”image” src=”images/backonoff.jpg” />
</div>
</td>
<td>
<div id=”nextbutton”>
<%–<input type=”image” src=”images/nextonoff.jpg” />–%>
<img src=”images/nextonoff.jpg” id=”Button2″ alt=”Next” onclick=”SaveFinalCard();” />
</div>
</td>
</tr>
</table>


http://blog.josh420.com/archives/2008/07/using-sprite-images-with-input-typeimage-for-hover-effect.aspx

Advertisements

Author: Imran Akram

A .NET/SharePoint Consultant and a political enthusiast who believes in putting the feet of the elected and/or unelected officials to fire in order to get good governance.

2 thoughts on “Hover effect on input type=image element”

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s