Pues sería meter las dos imagenes dentro de un div, la que quieres que se muestre y se oculte dentro del div de la primera imagen, y quedaría asi:
Código HTML:
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Sin titulo</title>
<script>
function MostrarImagen(){
document.getElementById('imagenOculta').style.display='block';
}
function noMostrarImagen(){
document.getElementById('imagenOculta').style.display='none';
}
</script>
<style>
.divPrimeraImagen {position:absolute;}
.divSegundaImagen {position:absolute; bottom:0px; left:0px;}
</style>
</head>
<body>
<div class="divPrimeraImagen"><img src="imagen.jpg" onmouseover="MostrarImagen()" onmouseout="noMostrarImagen()" />
<div id="imagenOculta" class="divSegundaImagen" style="display:none;"><img src="imagen2.jpg" onmouseover="MostrarImagen()" onmouseout="noMostrarImagen()" onclick="alert('aqui iria el document.location')"></div></div>
</body>
</html> Solo tendrías que cambiar la hoja de estilos, si quieres que se muestre abajo, pues con
bottom:0px; left:0px;, o lo alineas como te venga a ti bien.
Actualicé el ejemplo: http://www.karballo.net/ej/test__.html