CSS Codes
CSS Layouts

<html>
<head>
<style type="text/css">

.initial{
font-weight:bold;
background-image:url(first.jpg);
}

</style>

<script type="text/javascript">
<!--

/***********************************************
* Rollover background-image button- (c) Dynamic Drive (www.dynamicdrive.com)
* This notice must stay intact for use
* Visit http://www.dynamicdrive.com/ for full source code
***********************************************/

//Specify optional button target: "_new" for new window, or name of FRAME target (ie "myframe")
var buttontarget=""

if (document.images){
after=new Image()
//Enter image path of second image (for preloading purposes):
after.src="second.jpg"
}

function change2(e, image){
var el=window.event? event.srcElement: e.target
if (el.tagName=="INPUT"&&el.type=="button")
el.style.backgroundImage="url"+"('"+image+"')"
}

function jumpto2(url){
if (buttontarget=="")
window.location=url
else if (buttontarget=="_new")
window.open(url)
else
parent[buttontarget].location=url
}

//-->
</script>
</head>

<body>
<form onMouseover="change2(event, 'second.jpg')" onMouseout="change2(event, 'first.jpg')">
<input type="button" value="Yahoo" class="initial" onClick="jumpto2('http://yahoo.com')"> 
<input type="button" value="Google" class="initial" onClick="jumpto2('http://google.com')"> 
<input type="button" value="AlltheWeb" class="initial" onClick="jumpto2('http://alltheweb.com')">
<br>
</form>
</body>
</html>