Swap d'images+redirection après x secondes[Résolu]

Bonjour à tous,
Je me retrouve confronté à un souci et je pense que la seule option est le javascript,or je ne m'en suis jamais servi jusqu'à maintenant.

Dans un header wordpress,j'appelle une div qui contient un png et un lien.
Donc lorsque l'on click dessus il y a redirection.
Ce que j'aimerais c'est que cette image laisse place à une autre (un gif) une fois le click effectué .
Puis que la redirection se fasse une fois l'animation du gif terminée (cette animation dure 2 secondes).

Actuellement j'ai:

<div id="banner"><a href="l'adressedulien"><img src="l'adresse de l'image/logo.png" BORDER="0" /></a></div>

Et le css:

#banner{
float:left;
margin-top:650px;
width:230px;
height:35px;
}

Après quelques recherches je pense que les fonctions Timeout et onclick sont la solution,mais je ne comprends vraiment pas comment m'en servir.
Quelqu'un aurait-il la patience de m'aiguiller et de m'aider un peu?
Merci d'avance !

EDIT:
J'en suis arrivé à :

<div id="banner"><a href="l'adressedulien"><img src="l'adresse de l'image/logo.png" BORDER="0" onclick="this.src='l'adresse de l'image/logo2.gif" /></a></div>

Comme je m'en doutais l'ouverture du lien est prioritaire,néanmoins ; si la balise de lien est retirée le swap s'effectue bien.

Je ne recherche pas la code tout prêt à coller,je désire réellement comprendre,malheureusement je ne suis pas familier avec le javascript comme je le disais plus haut,et toute aide est la bienvenue.
Modifié par Evo7 (10 Dec 2012 - 16:45)

Salut,

Pour empêcher le navigateur de suivre le lien il faut retourner false lors du clique.
Mais avant il faudra utilisé setTimeout (et non Timeout) pour suivre le lien après X secondes.

Le plus simple et d'ajouter un onlick au lien avec:

var ref=this.href; //garde en mémoire l'adresse du lien (this ne pourra pas être utiliser dans la fonction car c'est une variable qui représente un "contexte", une fonction étant un nouveau contexte).
setTimeout(function(){window.location = ref}, 2000); //crée une fonction qui va s’exécuter après 2 secondes. window.location représente l'url de la page, le changé revient à changé de page.
return false; //pour empêcher le navigateur de suivre le lien.

Sinon je pense que faire attendre un utilisateur lors d'un clique est une mauvaise idée…

Merci pour ces précisions et ce coup de main,je vais me pencher là dessus aujourd'hui !
Concernent l'attente lors de la redirection,oui,j'y ai pensé et me suis mis à la place du visiteur.
Mais je pense que graphiquement ça peut se justifier,il faut imaginer le png de base comme étant un engrenage avec des éléments autour,une fois celui ci cliqué,le tout se met en marche (le .gif) et " déverrouille" l'accès au lien ,une fois l'animation du gif terminée (2sec)ce lien redirige vers une page privée où un login est demandé.
Tout est déjà mis en place et ,je trouve,qu'esthétiquement ça rend plutôt pas mal.

Merci encore pour ton aide,je vais lire quelque cours de javascript pour comprendre comment l'utiliser,je reviendrai vous tenir informés

<div id="banner"><a href="le_lien" onclick="var ref=this.href; setTimeout(function(){window.location = ref}, 1800); return false;"><img src="lien_image.png" BORDER="0" onclick="this.src='lien_image..gif'" /></a></div>

Fonctionne parfaitement !
J'ai juste changé un poil le temps pour coller parfaitement à l'anim'.
Un énorme merci à toi jo_link_noir