Miscellany

// BEFORE

// -html
<input type="image" name="_ctl0:ContentPlaceHolder1:_ctl7" title="About Us" class="btnAboutUs" oncontextmenu="return false;" onmouseover="this.className='btnAboutUs-Over';" onmouseout="this.className='btnAboutUs';" onmousedown="this.className='btnAboutUs-OnClick';" src="images/transp_pixel.gif" border="0" onclick="document.location.href='moviedetails.aspx?ID=4&amp;buy=yes'; return false;" language="javascript" />

// -css
.btnAboutUs
{
    background: url(images/aboutus_idle.gif) center center;
	width: 69px;
	cursor: pointer;
	height: 28px;
	border:  none;
}

.btnAboutUs-Over
{
    background: url(images/aboutus_over.gif) center center;
	width: 69px;
	cursor: pointer;
	height: 28px;
	border:  none;
}

.btnAboutUs-OnClick
{
    background: url(images/aboutus_click.gif) center center;
	width: 69px;
	cursor: pointer;
	height: 28px;
	border:  none;
}


// AFTER

// -html
<input type="image" title="About us" class="btnAboutUs" id="idle" onmouseover="this.id='over';" onmouseout="this.id='idle';" onmousedown="this.id='click';" src="images/transp_pixel.gif" border="0" />

// -css
.btnAboutUs
{
    background: url(images/aboutus_idle.gif) center center;
	width: 69px;
	cursor: pointer;
	height: 28px;
	border:  none;
}
.btnAboutUs#over
{
    background: url(images/aboutus_over.gif) center center;
}
.btnAboutUs#click
{
// changed picture completely (including size), not so smart but just showing that it's possible
    background: url(images/aboutus_click.gif) center center;
	width: 145px;
	height: 57px;
}


// AFTER THAT

// -HTML

// note the a-tags
<a><input type="image" title="AboutUs" class="btnAboutUs" src="images/transp_pixel.gif" border="0" /></a>

// -CSS

.btnAboutUs
{
    background: url(images/menu_aboutus_idle.gif) center center;
	width: 69px;
	cursor: pointer;
	height: 28px;
	border:  none;
}
a:hover .btnAboutUs
{
    background: url(images/menu_aboutus_over.gif) center center;
}
/* there's no a:click so we can't detect it */