Javascript non fonctionnel

Bonjour,

Me revoila de nouveau pour une ultime question :-)
toujours concernant mon histoire d'animation de menu (topic n°1, topice n°2), j'ai créé un petit code en javascript (je débute, je précise!) un peu comme je pensais que ca pourrait marcher.

évidemment, si je viens ici, c'est que ca ne marche pas...

en fait, l'animation est un fondu d'images que je trouvais sympa a réaliser, qui se joue donc sur le menu, dont voici la source html:

<div class="box">
  <ul>
    <li>
      <a href="index.html">
      <img src="Index.html_fichiers/img/acceuil.png" border="0" width="190" height="20" id="img1">
      <img src="Index.html_fichiers/img/acceuil_h.png" border="0" width="190" height="20" id="img1_1">
      </a>
    </li>
    <li>
      <a href="prestations.html">
      <img src="Index.html_fichiers/img/prestations.png" border="0" width="190" height="20" id="img2">
      <img src="Index.html_fichiers/img/prestations_h.png" border="0" width="190" height="20" id="img2_2">
      </a>
    </li>
    <li>
      <a href="localisation.html">
      <img src="Index.html_fichiers/img/localisation.png" border="0" width="190" height="20" id="img3">
      <img src="Index.html_fichiers/img/localisation_h.png" border="0" width="190" height="20" id="img3_3">
      </a>
    </li>
    <li>
      <a href="contact.html">
      <img src="Index.html_fichiers/img/contact.png" border="0" width="190" height="20" id="img4">
      <img src="Index.html_fichiers/img/contact_h.png" border="0" width="190" height="20" id="img4_4">
      </a>
    </li>
  </ul>
</div>

et les 2 fichiers javascript (autre que la librairie Jquery):

fading.js

				$(document).ready(function(){
			  $("#img1").hover(function(){
		      $("#img2").fadeIn(250);
			  $("#img3").fadeIn(250);
			  $("#img4").fadeIn(250);
			  $("#img1").fadeOut(250);
		    });
			$("#img2").hover(function(){
		      $("#img1").fadeIn(250);
			  $("#img3").fadeIn(250);
			  $("#img4").fadeIn(250);
			  $("#img2").fadeOut(250);
		    });
			$("#img3").hover(function(){
		      $("#img1").fadeIn(250);
			  $("#img2").fadeIn(250);
			  $("#img4").fadeIn(250);
			  $("#img3").fadeOut(250);
		    });
			$("#img4").hover(function(){
		      $("#img1").fadeIn(250);
			  $("#img2").fadeIn(250);
			  $("#img3").fadeIn(250);
			  $("#img4").fadeOut(250);
		    });
			$("#contenu").hover(function(){
			  $("#img1").fadeIn(250);
			  $("#img2").fadeIn(250);
			  $("#img3").fadeIn(250);
			  $("#img4").fadeIn(250);
		    });	
			$("#contenu2").hover(function(){
			  $("#img1").fadeIn(250);
			  $("#img2").fadeIn(250);
			  $("#img3").fadeIn(250);
			  $("#img4").fadeIn(250);
		    });	
			$("#contenu3").hover(function(){
			  $("#img1").fadeIn(250);
			  $("#img2").fadeIn(250);
			  $("#img3").fadeIn(250);
			  $("#img4").fadeIn(250);
		    });
		});

menuhover.js

			$(document).ready(function(){
		if(("#img1").hidden
		  {("#img1_1").fadeIn(250);
		});
		else(("#img1_1").fadeOut(250);
		)});
			$(document).ready(function(){
		if(("#img2").hidden
		  {("#img2_2").fadeIn(250);
		});
		else(("#img2_2").fadeOut(250);
		)});
			$(document).ready(function(){
		if(("#img3").hidden
		  {("#img3_4").fadeIn(250);
		});
		else(("#img3_3").fadeOut(250);
		)});
			$(document).ready(function(){
		if(("#img4").hidden
		  {("#img4_4").fadeIn(250);
		});
		else(("#img4_4").fadeOut(250);
		)});

fading.js fait correctement son travail, pas de problème ;)
il s'agit de menuhover.js que j'ai créé, malgré le fait que je soit débutant avec le JS, entièrement à la main: il ne semble rien faire...

De plus, j'aimerais que les images qui ont pour id "img1_1", "img2_2", "img3_3" et "img4_4" soient caché dès que la page est en chargement, jusqu'au moment où elles doivent entrer en action.

Quelqu'un qui pourrait m'aider? merci! :)