k I'm here to help you again.
In the head part of your page put this:
<style type="text/css">
.hover:link{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}
.hover:visited{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}
.hover:active{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}
.hover:hover{{background-image:url([imagetwo]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}
</style>
K sorry I know that looks confusing. I'll do a little mini tutorial on it, and the good thing is is that it's 100% valid. Yay. Oh yeah, here's a little legend:
[imageone] = the image you're going to use when your mouse is OFF of the link
[imagetwo] = the image you're going to use when your mouse is ON the link
.hover is what you will be what you classify.. like
<a href="link" class=hover> </a>
that will make the button.
to make multipul buttons using separate images, you just copy
.hover:link{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}
.hover:visited{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}
.hover:active{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}
.hover:hover{{background-image:url([imagetwo]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;}
but you replace .hover with something else, like .cheese or something.
<a href="blah" class="hover"> </a>
<a href="blah" class="cheese"> </a>
those would make 2 different links, if you were using what I just mentioned above.
If you want to make a link that has text on it and a background image that bevels in and out with your mouse on and off of it, then you would add this after the height definition, after the ";" and before the "}":
text-align:center;color:FONT COLOUR;font-size:SIZEpt;
so you would have something that looks like:
<html>
<head>
<style type="text/css">
.hover:link{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;text-align:center;color:FONT COLOUR;font-size:SIZEpt;}
.hover:visited{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;text-align:center;color:FONT COLOUR;font-size:SIZEpt;}
.hover:active{background-image:url([imageone]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;text-align:center;color:FONT COLOUR;font-size:SIZEpt;}
.hover:hover{{background-image:url([imagetwo]);width:IMAGE WIDTH HEREpx;height:IMAGE HEIGHT HEREpx;text-align:center;color:FONT COLOUR;font-size:SIZEpt;}
</style>
<title>My Site. Yay.</title>
</head>
<body>
<a href="http://torxter.net" class="hover">Hozzah</a><br>
<a href="http://torxter.net" class="hover">it's</a><br>
<a href="http://torxter.net" class="hover">links</a><br>
<a href="http://torxter.net" class="hover">man.</a><br>
</body>
</html>
So there is your complicated tutorial.
It was really confusing I know. So it's probably better that you go to xentrik.net and look there for a way easier and a well written tutorial.
I just wasted 5 minutes of your life and probably gave you a headache.