IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Compatibilité navigateur sur la récupération des couleurs


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2016
    Messages : 14
    Par défaut Compatibilité navigateur sur la récupération des couleurs
    Bonjour à tous !

    J'ai un petit souci sur une fonctionnalité javascript que j'ai implémenté à une de mes pages. Celle ci sert à changer la couleur de fond d'un élément quand la souris est passée dessus. La fonctionnalité marche très bien sur IE mais refuse de fonctionner sur Firefox.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    function overLine(div){
     
    	console.log(div.style.background);
     
    	if(div.style.background == "rgb(221, 221, 221)"){					
    	div.style.background = "rgb(171, 191, 221)"; 			
    	} 
    	else if(div.style.background == "rgb(187, 187, 187)"){	
    	div.style.background = "rgb(76, 103, 143)";				
    	div.style.color = "#ffffff";							
    	} 
    	else {div.style.background = "rgb(199, 213, 234)";		
    	}
     
     
    	}
     
    	function outLine(div){
     
    	console.log(div.style.background);
     
    	if(div.style.background == "rgb(171, 191, 221)"){		
    	div.style.background = "rgb(221, 221, 221)";			
    	} 
    	else if(div.style.background == "rgb(76, 103, 143)"){	
    	div.style.background = "rgb(187, 187, 187)";		
    	div.style.color = "#000000";						
    	} 
    	else {div.style.background = "#ffffff";					
    	}
    	}
    Le problème est que les tests conditionnels de la première fonction ne sont pas vérifiés lors de la première exécution, et la fonction renvoie toujours :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    div.style.background = "rgb(199, 213, 234)"
    Bien évidement la seconde fonction renvoie du coup toujours :
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    div.style.background = "#ffffff"
    Et ça transforme toute mes couleurs de fond en blanc au passage de la souris...

    Si quelqu'un s'y connait en compatibilité navigateur, un petit coup de pouce serait le bienvenue !

  2. #2
    Membre extrêmement actif

    Homme Profil pro
    Consultant
    Inscrit en
    Janvier 2006
    Messages
    1 376
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Consultant

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 376
    Par défaut
    As-tu tenté de remplacer les valeurs de style "rgb()" par "#XXXXXX" ?

  3. #3
    Membre averti
    Homme Profil pro
    Étudiant
    Inscrit en
    Mai 2016
    Messages
    14
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Étudiant
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Mai 2016
    Messages : 14
    Par défaut
    Non, mais je ne pense pas que le problème vienne de là. En bidouillant un peu je viens de rendre mon script compatible Firefox, mais il n'est du coup plus compatible sur IE...

    La différence entre les deux viens du retour de la fonction :

    Celle-ci renvoie :
    -"rgb(***, ***, ***) none repeat scroll 0% 0%" sur Firefox.
    -"rgb(***, ***, ***)" sur IE.

    Je vois donc mieux d’où vient le problème, mais je ne sais malheureusement pas comment prendre en compte le navigateur pour modifier la condition de mon if en javascript.

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 211
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 211
    Par défaut
    Bonjour,
    je ne vois pas l’intérêt de faire un test sur la couleur car comme tu viens de le voir le retour n'est pas identique suivant le navigateur.
    Tu pourrais essayé avec getComputedStyle(), mais le plus simple me semble de gérer le « over/out » via le CSS ou encore d'affecter un class à tes éléments au survol et de la retirer lorsque l'on quitte l'élément.

  5. #5
    Membre extrêmement actif

    Homme Profil pro
    Consultant
    Inscrit en
    Janvier 2006
    Messages
    1 376
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Consultant

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 376
    Par défaut
    Sinon t'utilises jQuery

  6. #6
    Membre extrêmement actif

    Homme Profil pro
    Consultant
    Inscrit en
    Janvier 2006
    Messages
    1 376
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Yvelines (Île de France)

    Informations professionnelles :
    Activité : Consultant

    Informations forums :
    Inscription : Janvier 2006
    Messages : 1 376

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Problème d'appel d'une fonction javascript
    Par nicaud dans le forum Balisage (X)HTML et validation W3C
    Réponses: 1
    Dernier message: 07/01/2011, 09h40
  2. Réponses: 10
    Dernier message: 14/03/2009, 13h36
  3. Réponses: 2
    Dernier message: 05/10/2007, 14h31
  4. problème avec une fonction javaScript
    Par volthur dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 16/05/2006, 18h04

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo