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

How to change the mouse pointer to a hand with CSS

hello there,

there are some scenarios where u want to change the mouse pointer to the one that looks like a hand, you know like the one u get when you hover over a link. Sometimes its pretty useful when you’re thinking about making a popup window that would come up when you click on a link, by the way, when you do such a thing you put some javascript in the onclick event and with that you want to give the user a feeling that he/she’s clicking on a hyperlink. So this is a sample class I’ve made

All you need to do is to use the Cursor:pointer; property and walllah, u got it

.mousetoHand
{
color:#5B3C1D;
font-family:Arial;
font-size:12pt;
cursor:pointer;
text-decoration:none;

}

How to Left, Right, Center Align With CSS

http://www.communitymx.com/content/article.cfm?cid=529B0

http://www.ehow.com/how_2284643_left-right-center-align-css.html

body {
width: 80%;
margin-right: auto;
margin-left: auto;
border: 1px solid black;

}

.container {
position: relative;
height: 50px;
}

.left-element {
position: absolute;
left: 0;
width: 50%;
}

.right-element {
position: absolute;
right: 0;
width: 50%;
text-align: right; /* depends on element width */
}

Download Samples