Changement d'un background 100% resizable sur survol d'un lien

Bonjour,

Depuis plusieurs année que je développe j'ai toujours trouvé mes réponses en surfant sur le web.
Je ne sais pas si c'est la fatigue mais je bloque depuis le début d'après-midi sur un problème que je n'arrive pas résoudre et dont je ne trouve pas la solution.

Je réalise un site épuré avec une image de fond à 100% qui se redimensionne automatiquement en fonction de la taille de la fenêtre. le menu est placé en bas et est fixe. il est composé de lien1 + lien2 + lien3 etc...

Je souhaiterai que la grande image de fond à 100% change lorsque l'utilisateur survol un lien du menu, et que l'image de base reviennent lorsque l'utilisateur ne survol plus rien.

je sais changer l'image d'un bouton sur un Rollover, mais la je vois pas comment faire le lien entre une image en background dans une div et des liens qui sont dans une autre div.
EN PLUS,

pour des raisons d'esthétisme, je dois aussi intégrer un effet de transition entre les images de type "fade" afin que la transition entre les image ne soit pas brutal.

un exemple très proche de ce que je recherche est le site


Je n'ai que très peu de connaissance en javascript, si vous connaissez la solution merci d'être pédagogique pour que je comprenne. ( explication du code javascript )

Merci d'avance à ceux qui peuvent m'aider.

Salut,
Est que tu télécharge déjà un bibliothèque (du style jquery) ?
Est ce que tu peux faire voir ton code pour mieux visualiser ce que tu souhaite faire.

Appliquer à une balise :

<a href="#"
  onmouseover="document.getElementsByTagName('balise')[0].style.backgroundImage='url(backgroung.png)';"
  onmouseout="document.getElementsByTagName('balise')[0].style.backgroundImage='url()';">lien</a>

Tu peux remplacer balise par body car le background s'applique normalement à cette dernière.
Modifié par rodolpheb (18 Nov 2012 - 13:14)

Tu peux aussi faire ça :

<a href="#" onmouseover="document.body.style.backgroundImage='url(img2.jpg)';" 
onmouseout="document.body.style.backgroundImage='url(img1.jpg)';">lien</a>

En ayant défini ton bgd avec l'img1 au préalable.

Bonjour, serait il possible d'avoir le morceaux de code entier, je bloque depuis quelques jours sur exactement le même problème! Faut il télécharger une bibliothèque et laquelle si oui? (et oui je ne suis que graphiste... )
merci d'avance