Bug sous ie et firefox, jquery

Résolu
tokie-03 Messages postés 9 Date d'inscription   Statut Membre Dernière intervention   -  
maka54 Messages postés 698 Date d'inscription   Statut Membre Dernière intervention   -
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

A voir également:

3 réponses

Réponse 1 / 3
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
tokie-03 Messages postés 9 Date d'inscription   Statut Membre Dernière intervention  
 
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
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
tokie-03 Messages postés 9 Date d'inscription   Statut Membre Dernière intervention  
 
D'accord, je n'ai toujours pas résolue ce problème mais merci quand même
0
Réponse 2 / 3
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
tokie-03 Messages postés 9 Date d'inscription   Statut Membre Dernière intervention  
 
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
Réponse 3 / 3
maka54 Messages postés 698 Date d'inscription   Statut Membre Dernière intervention   80
 
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
maka54 Messages postés 698 Date d'inscription   Statut Membre Dernière intervention   80
 
et pour le cadre : #cadre1

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

Discussions similaires

Iptv beug
leogauthier15 -
bazfile -

1 réponse
Méssage Firefox ''Couldn't load XPCOM''
pistouri -
pistouri -

0 réponse
Problème IPTV SMARTER
eneleh49 -
glandu -

1 réponse
Smart IPTV met un temps fou à charger depuis que je suis passé à la fibre
Ancaro13 -
glandu -

3 réponses
Bug de chaîne IPTV
GeraltDeRiv13 -
bazfile -

1 réponse