It'll work just fine the way your doing it. And your right, the trick is to give each link a unique ID, like this...
<style type="text/css">
body{background-color:#260973;}
a.menulink {
background-color:#1e04b2;
display: block;
width: 198px;
text-align: left;
text-decoration: none;
font-family:arial;
font-size:12px;
color: #11e1ff;
BORDER: none;
padding:5px;
border: solid 1px #000000;
}
a.menulink:hover{
border: solid 1px #6100C1;
background-color: #11e1ff;
color: #1e04b2
}
a#desert:hover {
background-image: url('bgdesert.jpg');
}
a#forest:hover {
background-image: url('bgforest.jpg');
}
a#swamp:hover {
background-image: url('bgswamp.jpg');
}
td {width:100%}
</style>
<table border="0" width=198 align="center">
<tr>
<td bgcolor="#260973" align="center" style="color:#11e1ff; font-weight:bold">
-Index-
<br />
</td>
</tr>
<tr>
<td><a href="am.htm" class="menulink" id="desert"> - About Me</a></td>
</tr>
<tr>
<td><a href="contact.htm" class="menulink" id="forest"> - Contact</a></td>
</tr>
<tr>
<td><a href="thoughts.htm" class="menulink" id="swamp"> - Random Thoughts</a></td>
</tr>
</table>
Note the only difference is that ID's are marked with a '#' (pound sign) instead of a '.' (period) in the CSS block. Oh, and don't forget that IDs have to be unique. Some browsers throw a fit if they aren't.
B)
P.S. I took the liberty of cleaning up your code a bit, hope you don't mind.
