<script type = "text/javascript" src = "http://code.jquery.com/jquery-1.6.1.min.js"></script>
<style type = "text/css">
*{
	margin:0px;
	padding: 0px;
}

.mymegabutton{
	border: none;
	width: 50px;
	height: 50px;
	background-image: url("http://poorking.0fees.net/one.jpg");
}

.b0{
	background-position: 0px 0px;
}
.b1{
	background-position: 0px 50px;
}
.b2{
	background-position: 0px 100px;
}

.hvr0{
	background-position: 100px 0px;
}
.hvr1{
	background-position: 100px 50px;
}
.hvr2{
	background-position: 100px 100px;
}

.act0{	background-position: 50px 0px; }
.act1{	background-position: 50px 50px; }
.act2{	background-position: 50px 100px; }

</style>


<div class = "mymegabutton b0"></div>
<div class = "mymegabutton b1"></div>
<div class = "mymegabutton b2"></div>

<script type = "text/javascript">

$(".mymegabutton").each(function(i){
	$(this).hover(function(){
		$(this).addClass("hvr" + i);
	}).mouseout(function(){
		$(this).removeClass("hvr" + i);
	}).click(function(){
		var that = this;
		$(".mymegabutton").each(function(i){
			if(this === that){
				$(this).toggleClass("act" + i);
				return;
			}
			$(this).removeClass("act" + i);
		})		
	})
})
</script>

вот, одна на всех картинка, классы hvr и act естественно разные раз разный background-position