Ok.
En noget smukkere måde at gøre det på er efter min mening med css og xhtml.
Det kan gøres på denne måde:
(Du laver de to billeder i dobbelte højde af den som vises og så kan du sørge for at det er den nederste del af billedet som vises når musen føres hen over. Det har mange fordele at gøre det på den måde. Blandt andet at søgemaskiner kan læse dine links og at siden bliver mere tilgængelig og lettere at navitere i for mange mennesker.)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>CSS Image roolover</title>
<style type="text/css">
<!--
/* Menu */
I { DISPLAY: none}
#Menu { width: 487px; float: right; margin-top: 65px;}
#Menu UL { PADDING: 0px 0px 0px 0px; margin: 0px; WIDTH: 487px; LIST-STYLE-TYPE: none; FLOAT: right }
#Menu li { FLOAT: right}
#Menu A { DISPLAY: block; HEIGHT: 51px }
#Menu A.forsiden { BACKGROUND: url(menu_01.png) no-repeat left top; WIDTH: 92px }
#Menu A.kontakt { BACKGROUND: url(menu_02.png) no-repeat left top; WIDTH: 92px}
#Menu A:hover { BACKGROUND-POSITION: left bottom }
-->
</style>
</head>
<body>
<div id="Menu">
<ul>
<li><a class="forsiden" href="/"><i>Forsiden</i></a></li>
<li><a class="kontakt" href="mailto:info@migselv.dk"><i>Kontakt</i></a></li>
</ul>
</div>
</body>
</html>