intercambio de imagenes en link

Hola estoy haciendo un enlace que solo tiene una imagen y no texto, esta imagen la tengo en don tonos el que ven y al hacer hover que cambia. Bueno pues no me funciona, las direcciones de las imágenes están correctas ya que al insertarla en el html sale la que pongo pero no hace la función en css.
Paso a mostraros html y css.

<!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>Probando cambio de imagenes</title>
<style type="text/css">
#facebokkimg {

float: left;
height: 40px;
width: 40px;
text-decoration:none;
}
#facebokkimg a {
background-image: url(png/facebook1.png);
background-repeat: no-repeat;
height: 40px;
width: 40px;
float: left;

}
#facebokkimg a:hover,visited{
background-image: url(png/facebook.png);
background-repeat: no-repeat;
float: left;
height: 40px;
width: 40px;
}


</style>
</head>

<body>
<div id="facebokkimg"><a href="#"></a></div>
</body>
</html>



Gracias a todos los que me echen una mano.
Yo lo acabo de probar y funciona sin problemas....
¿qué es lo que te sale?
Lo único que se me ocurre es que no estés guardando bien las fotos "facebook1.png" y "facebook.png", fijate bien si tienes la extensión PNG correcta, no vaya a ser que tengas JPG o algo por el estilo.
Y además recuerda que tienes que tener las dos imágenes dentro de una carpeta que se llama "png".
Como te digo, yo he copiado todo en un archivo, he creado una carpeta llamada "png", y dos archivos con el nombre "facebook1.png" y "facebook.png"; y ha funcionado sin problema.
Manda un pantallazo o algo a ver... ;)