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>
