Bug sous ie et firefox, jquery

Résolu
tokie-03 -  
Bonjour,

j'ai un petit problème sur mon site, en fait j'ai utilisé des méthodes en jquery pour pouvoir créer des effets, ça marche bien sur chrome mais pas sur firefox et ie.
aidez moi svp, ça fait des heures que j'essaye des trucs mais j'arrive pas du tout :(

une partie du codage :

$('#m1').mouseenter(function(){

document.getElementById('m1').style.cursor='pointer';

if ($("#m1").css('background-image') ==
'url(http://www.*****.fr/test/BTNINSTALLATION.png)'){

$('#cadre1').fadeIn("slow");
}

else{

document.getElementById("m1").style.backgroundImage =
'url("http://www.****.fr/test/BLANC-VERT.png")' ;
$('#cadre1').hide();
}
});

$('#m1').mouseleave(function(){

document.getElementById('m1').style.cursor='pointer';

if($("#m1").css('background-image') ==
'url(http://www.****.fr/test/BTNINSTALLATION.png)'){
document.getElementById("m1").style.backgroundImage =
'url("http://www.****.fr/test/BTNINSTALLATION.png")';
}
else{
document.getElementById("m1").style.backgroundImage = 'url("http://www.****.fr/test/BLANC.png")';

}
});

$('#m1').click( function(){

if ($("#m1").css('background-image') !=
'url(http://www.***.fr/test/BTNINSTALLATION.png)'){
$('#m1').css('background-image',
'url(http://www.****.fr/test/BTNINSTALLATION.png)');

$('#m1').css('color', 'white');

$('#cadre1').css('background-image', 'url(http://www.****.fr/test/INSTALLATION.png)').fadeIn("slow");

}
});

le problème est quand quand je clique sur "m1" ce qui rend le background-image BTNINSTALLATION ensuite j'enlève ma souris ça passe en BLANC c'est à dire le esle de mouseleave alors que logiquement ça doit rester le background-image BTNINSTALLATION

3 réponses

  1. Utilisateur anonyme
    Bonjour

    Ajoute un alert ($("#m1").css('background-image')); au début de ton mouseleave. Tu verras ce qu'il y a vraiment, et ça devrait te donner une idée de ce qui cloche dans ton test.
    0
    1. tokie-03 Auteur
      merci pour ta réponse

      n'importe quoi, quand c'est BLANC-VERT ça me mets BLANC-VERT et quand c'est BTNINSATALLATION ça me mets bien BTNINSTALLATION (aprés avoir cliqué) et juste après ce message ça le change en BLANC :/
      0
    2. Utilisateur anonyme
      Je n'y connais pas grand chose en jquery, mais je trouve bizarre que dans le onclick tu modifies le background avec la méthode css de $('#m1') : 
      $('#m1').css('background-image', 'url(...

      Alors que dans le onleave, tu utilises une méthode complètement différente : 
      document.getElementById("m1").style.backgroundImage = 'url(":...

      Pas sûr que ce soit équivalent, mais comme je te l'ai dit, je ne suis pas expert dans ce domaine.
      0
    3. tokie-03 Auteur
      D'accord, je n'ai toujours pas résolue ce problème mais merci quand même
      0
  2. Utilisateur anonyme
    J'ai reproduit ton code pour voir et j'ai eu le même problème.
    Je t'avais demandé de mettre un alert ($("#m1").css('background-image')); : l'as-tu vraiment fait ? As-tu vraiment regardé la différence de comportement entre Chrome et FF (je n'ai pas essayé IE)
    Chrome affiche
    url(http://www.****.fr/test/BTNINSTALLATION.png)
    Alors que FF affiche
    url("http://www.****.fr/test/BTNINSTALLATION.png")
    Il y a des " en plus.
    Donc ton test ne convient pas

    Modifie tous tes tests : 
    if(($("#m1").css('background-image') ==  
'url(http://www.****.fr/test/BTNINSTALLATION.png)')||($("#m1").css('background-image') ==  
'url("http://www.****.fr/test/BTNINSTALLATION.png")'))

    (attention, quand tu testes !=, il faut mettre && à la place de ||
    0
    1. tokie-03 Auteur
      merci beaucoup, alors j'ai tout modifié par ça :
      $('#m1').mouseenter(function(){
      document.getElementById('m1').style.cursor='pointer';

      if ((document.getElementById("m1").style.backgroundImage == 'url("http://www.***.fr/test/BTNINSTALLATION.png")')
      ||
      (document.getElementById("m1").style.backgroundImage == 'url(http://www.***.fr/test/BTNINSTALLATION.png)')){

      $('#cadre1').fadeIn("slow");
      }else{
      //if($("#m1").css('background-image') == 'url(http://www.****.fr/test/BLANC.png)'){

      document.getElementById("m1").style.backgroundImage = 'url("http://www.***.fr/test/BLANC-VERT.png")' ;
      $('#cadre1').hide();
      }

      en fait sur chrome il prends le lien sans " " et sur mozilla faut mettre " " dans le lien donc pour faire cela j'ai rajouté une condition avec || et quand je fais mon .click je change le || par &&.
      merci bien et bonne journée.
      0
  3. maka54
    C'est du grand n'importe quoi ce code ....

    mouseenter, mouseleave, click .... c'est le merdier, et les tests de background n'en parlons meme pas

    Voilà une piste que devrais t'aider

    css : 
    #m1{ 
background-image:url(image par défaut); 
} 

#m1:hover{ 
background-image:url(image lorsque le pointeur est sur l'element); 
} 


#m1.click{ 
background-image:url(image lorsque  l'element a été cliqué); 
} 

#m1.click:hover{ 
background-image:url(image lorsque  l'element a été cliqué et que le pointeur est sur l'element); 
}


    js : 

    $('#m1').click( function(){  
 $(this).addClass('click'); 
});
    0
    1. maka54
      et pour le cadre : #cadre1

      $('#m1').hover(function(){
      $('#cadre1').fadeIn("slow");
      }.function(){
      $('#cadre1').hide();
      });
      0

Discussions similaires

Iptv beug
leogauthier15

1 réponse
Problème IPTV SMARTER
eneleh49

1 réponse