Prueba con esto:
Código HTML:
<html>
<head>
<style></style>
<script language="JavaScript" type="text/javascript">
function over() {
document.getElementById('img').style.display = "inline";
document.getElementById('texto').style.display = "none";
}
function out() {
document.getElementById('img').style.display = "none";
document.getElementById('texto').style.display = "inline";
}
</script>
</head>
<body>
<a href="index-es.html" title="Accede a la página" onmouseover="over()" onmouseout="out()"><img id="img" src="http://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Flag_of_Spain.svg/750px-Flag_of_Spain.svg.png" style="display:none;" /><span id='texto'>Acceder</span></a>
Responder Citando
</body>
</html>
Si quieres que la imagen salga más pequeña, ponle width y height.