I'm not sure what effect you were intending. On my system with IE6 and NN7, the home button appears the same: Dark blue text changing to red, both on a light blue background.
I'd suggest making the home link the same as the other links - it doesn't look "clickable" compared to the other links. As for the othe links - you have a fancy multi-way mouseover but the wrapping text detracts from the appearance.
You might try using your images in a list construct.
li.fancy {list-style-position: outside; list-style: url(/images/leftnav_but_01.gif) circle;}
This list-style-position will keep wrapping links from going under the image like this:
Outside rendering:
* List item 1
second line of list item
Inside rendering:
* List item 1
second line of list item
I don't know what effect this would have on your JS image swapping, though.
Regarding classes. You should look into "contextual selectors" where you may define an id and then specify classes like this:
#example {display:block}
#example a:link,#example a:visited {background-color:blue; color:green;}
#example a:hover, #example a:active {background-color:red;}
. . .
<div id="example">
<a href="...">An example</a>
</div>You can also put more than one class in a tag.
a.button {display:block; border-width:2px;
border-style:outset;padding:.2em;width:20em;
text-align:center;text-decoration:none;}
.red {background-color:red;color:blue;border-color:red;}
.blue {background-color:blue;color:red;border-color:blue;}
. . .
<a class="button red" href="...">A red button example</a>
<a class="button blue" href="...">A blue button example</a>