Jquery: fading non fonctionnel sur image

Résolu/Fermé
abcdu44 Messages postés 963 Date d'inscription vendredi 31 juillet 2009 Statut Membre Dernière intervention 1 avril 2011 - Modifié par abcdu44 le 12/03/2011 à 23:57
 kikikoo - 14 mars 2011 à 18:18
Bonjour,

Suite au post concernant mon problème ave un rollover (lien).

J'ai donc changé d'idée en utilisant Jquery et les fadings, mais le code que j'ai créé ne semble pas fonctionner... il faut aussi savoir que je débute avec le javascript... Pourriez-vous me dire ce qui pourrait clocher dans mon code?

contenu de l'"head"

<script type="text/javascript" src="Index.html_fichiers/jquery-1.3.1.min.js"></script> 
<script type="text/javascript"> 
 $(document).ready(function(){  
  $("#img1").hover(function(){ 
  $("#img2").fadeIn(); 
  $("#img3").fadeIn() 
  $("#img4").fadeIn() 
  $("#img1").fadeOut() 
 }); 
  $("#img2").hover(function(){ 
  $("#img1").fadeIn(); 
  $("#img3").fadeIn() 
  $("#img4").fadeIn() 
  $("#img2").fadeOut() 
 }); 
  $("#img3").hover(function(){ 
  $("#img1").fadeIn(); 
  $("#img2").fadeIn() 
  $("#img4").fadeIn() 
  $("#img3").fadeOut() 
 }); 
  $("#img4").hover(function(){ 
  $("#img1").fadeIn(); 
  $("#img2").fadeIn() 
  $("#img3").fadeIn() 
  $("#img4").fadeOut() 
 }); 
}); 
</script> 


contenu de la div contenant la zone sur laquelle je travaille:
 
<div class="box"> 
  <ul> 
    <li> 
      <a href="index.html"> 
      <img src="Index.html_fichiers/img/menu.png" border="0" width="190" height="20" id="img1"> 
      <img src="Index.html_fichiers/img/acceuil.png" class="img_texte"> 
      </a> 
    </li> 
    <li> 
      <a href="prestations.html"> 
      <img src="Index.html_fichiers/img/menu.png" border="0" width="190" height="20" id="img2"> 
      <img src="Index.html_fichiers/img/prestations.png" class="img_texte"> 
      </a> 
    </li> 
    <li> 
      <a href="localisation.html"> 
      <img src="Index.html_fichiers/img/menu.png" border="0" width="190" height="20" id="img3"> 
      <img src="Index.html_fichiers/img/localisation.png" class="img_texte"> 
      </a> 
    </li> 
    <li> 
      <a href="contact.html"> 
      <img src="Index.html_fichiers/img/menu.png" border="0" width="190" height="20" id="img4"> 
      <img src="Index.html_fichiers/img/contact.png" class="img_texte"> 
      </a> 
    </li> 
  </ul> 
</div> 



Les amis de mes amis sont mes amis. Les membres de CCM sont mes amis. Google est l'ami des membres de CCM. Donc Google est mon ami.

8 réponses

abcdu44 Messages postés 963 Date d'inscription vendredi 31 juillet 2009 Statut Membre Dernière intervention 1 avril 2011 110
13 mars 2011 à 20:48
UP! :)
0
abcdu44 Messages postés 963 Date d'inscription vendredi 31 juillet 2009 Statut Membre Dernière intervention 1 avril 2011 110
14 mars 2011 à 17:55
toujours pas d'idée?
0
Lut

  $("#img4").hover(function(){ 
  $("#img1").fadeIn(); 
  $("#img2").fadeIn() 
  $("#img3").fadeIn() 
  $("#img4").fadeOut() 



Commence par mettre des ";" après toutes tes instructions

++
0
abcdu44 Messages postés 963 Date d'inscription vendredi 31 juillet 2009 Statut Membre Dernière intervention 1 avril 2011 110
14 mars 2011 à 18:04
Merci kikikou! ;) les effet de fading se font bien, comme je le voyait :)

par contre...

pas a tous les coups :(

quand je recharge la page, desfois ca marche, desfois ca marche pas, desfois ca marche que sur certaines image (4 au total)

tite solution a ce bug ou la mise en ligne pourrait faire que ca marche mieux? (site en local pour l'instant...)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Tu arrives à poster tout le contenu de ton index.html stp ? Je vais tester ca chez moi.

La mise en ligne ne résoud rien par contre ;)
0
Et si jamais sous firefox il y a un débugger javascript (Ctrl + Shift + j).

Très utile ;)
0
abcdu44 Messages postés 963 Date d'inscription vendredi 31 juillet 2009 Statut Membre Dernière intervention 1 avril 2011 110
14 mars 2011 à 18:17
hop nan c'est bon j'ai trouvé ce qui n'allait pas :)
un " en moins dans le html juste a la fin du dernier "id"... allez savoir pourquoi, ca marche maintenant...

résolu!
0
magnifique!

Bonne suite !
0