Changer l'image au vol de la souris + lien

Bonjour,

Je cherche depuis quelques jours comment changer au survol de la souris une image couplée d'un lien.

Voici se que j'obtiens sur ma page :

http://davy.au.free.fr/exemple.html

Se que je voudrais obtenir mais avec un lien :

http://davy.au.free.fr/exemple2.html

Or je voudrais obtenir en image hors vol de la souris :

http://davy.au.free.fr/images/logo_facebook2.png

et au survol de la souris avec un clic lien :

http://davy.au.free.fr/images/logo_facebook2over.png

L'image 1 reste fixe et l'image 2 passe derrière la 1 or je souhaite que l'image 1 disparait quand la souris passe dessus pour laisser l'image 2.
Aussi, le lien ne marche que si l'image 1 est présente.

Voici mon script :

HTML :

<div id="bouton_face" class="h3"><a href="https://www.facebook.com/?ref=logo!/********" target="_blank"><img src="images/logo_facebook2.png"</a></div>

CSS :

#bouton_face
{
background:url(../images/logo_facebook2.png);
width:31px;
height:32px;
margin:4px -5px 0 -15px;

}

#bouton_face:hover
{
background:url(../images/logo_facebook2over.png);
width:166px;
height:32px;
}

Et je n'arrive pas à résoudre ce problème, je vous remercie pour votre aide.

Davy