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 :

Comment faire lorsque le curseur parcoure une zone A, pour qu'une zone B change de couleur?


Sujet :

JavaScript

  1. #1
    Membre actif
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    Août 2008
    Messages
    557
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2008
    Messages : 557
    Points : 286
    Points
    286
    Par défaut Comment faire lorsque le curseur parcoure une zone A, pour qu'une zone B change de couleur?
    Bonjour,

    Si on a deux div distincts A et B.

    comment fait on lorsque le curseur est positionné sur le div A, pour que le div B change de couleur?

    j'ai fait ça mais ça marche pas !

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onmouseover=" var test=getElementsByID("B"); test.style.backgroundColor=\'#9932cc\' ";
    Oui et je suis débutant.

  2. #2
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Attention à la syntaxe et à bien imbriquer les quotes
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    onmouseover="document.getElementById('B').style.backgroundColor='#9932cc'"
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  3. #3
    Membre actif
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    Août 2008
    Messages
    557
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2008
    Messages : 557
    Points : 286
    Points
    286
    Par défaut
    ok merci Bovino , en fait j'ai mis des antislash car je suis dans un echo ' '

    L'idéal serait de savoir comment faire lorsqu'on utilise une class et non pas un id dans le div?

  4. #4
    Membre actif
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    Août 2008
    Messages
    557
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2008
    Messages : 557
    Points : 286
    Points
    286
    Par défaut
    en mettant un name="test" dans le div en question,

    j'ai tenté ça

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    onmouseover="this.style.backgroundColor=\'#9932cc\';
     
    for (var i=0;i<document.getElementsByTagName(\'div\').length; i++) {
    	if(document.getElementByTagName(\'div\').item(i).name == \'test\') {
    		document.getElementByTagName(\'div\').item(i).name.style.backgroundColor=\'#9932cc\' ;}
    }">

  5. #5
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Bonjour,

    Il y a un point virgule en trop ici:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    if(document.getElementByTagName(\'div\').item(i).name == \'test\';)

  6. #6
    Membre actif
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    Août 2008
    Messages
    557
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2008
    Messages : 557
    Points : 286
    Points
    286
    Par défaut
    Oui merci j'ai rectifié

  7. #7
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Cette syntaxe me semble plus pratique:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
     
    var tab_div = document.getElementsByTagName(\'div\');
    for (var i=0;i<tab_div.length; i++) {
    	if(tab_div[i].name == \'test\') {
    		tab_div[i].style.backgroundColor=\'#9932cc\' ;}
    }">

  8. #8
    Membre actif
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    Août 2008
    Messages
    557
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2008
    Messages : 557
    Points : 286
    Points
    286
    Par défaut
    Hélas, ça ne marche pas. dsl

  9. #9
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Alors je vais vous demander le code HTML généré.

  10. #10
    Membre actif
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    Août 2008
    Messages
    557
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2008
    Messages : 557
    Points : 286
    Points
    286
    Par défaut
    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
    echo '
    <div class="contentPublication" onmouseout="this.style.backgroundColor=\'#fafad2\';" 
     
    onmouseover="this.style.backgroundColor=\'#9932cc\';
     
    var i;
    var tab_div = document.getElementsByTagName(\'div\');
    for (i=0;i<=tab_div.length; i++) {
    	if(tab_div[i].name == \'test\') {
    		tab_div[i].style.backgroundColor=\'#000\' ;}
    }">
     
     
    <div class="basImage" name="test" ><a href="form.php?id=o&rubrique=livre&num_publi='.$result['numpublication'].'"/>Commander</a></div>
    </div>
    ';
    }
     
    echo '<br/><div name="test">test</div><br/><br/><br/>';
    J'ai fait un div name test en bas car j'avais peur que le CSS perturbe les styles de javascript, même si j'ai mis les hover en commentaire dans le CSS.

    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
     
    div.basImage {
    border-top:1px solid purple;
    float:left;
    font-size:0.9em;
    margin-left:-152px;
    margin-top:23.3%;
    position:relative;
    width:23.7%;}
     
    div.basImage a {
    background-image:url(images/bouton_command.jpg);
    color:#fff;
    text-decoration:none;
    width:100%;
    position:absolute;
    left:0%;}
     
    /*div.basImage a:hover {
    color:#AC36FF;}
     
    div.basImage:hover {
    background-color:#FF00FF;}*/

  11. #11
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Ce n'est pas le HTML généré mais on remarque déjà une erreur de syntaxe. Ceci n'est pas très catholique:

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
     
    <div class="contentPublication" onmouseout="this.style.backgroundColor=\'#fafad2\';" 
     
    onmouseover="this.style.backgroundColor=\'#9932cc\';
     
    var i;
    var tab_div = document.getElementsByTagName(\'div\');
    for (i=0;i<=tab_div.length; i++) {
    	if(tab_div[i].name == \'test\') {
    		tab_div[i].style.backgroundColor=\'#000\' ;}
    }">
    Je voyais plutôt qqch comme:

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
     
    <div class="contentPublication" onmouseout="this.style.backgroundColor=\'#fafad2\';" onmouseover="this.style.backgroundColor=\'#9932cc\';">


    Avec autre part dans des balises ou un fichier Javascript (mais là je n'ai pas saisi quand vous désiriez faire cette opération):

    Code js : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    var i;
    var tab_div = document.getElementsByTagName(\'div\');
    for (i=0;i<=tab_div.length; i++) {
    	if(tab_div[i].name == \'test\') {
    		tab_div[i].style.backgroundColor=\'#000\' ;
                 }
    }

  12. #12
    Membre actif
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    Août 2008
    Messages
    557
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2008
    Messages : 557
    Points : 286
    Points
    286
    Par défaut
    Merci, en fait, je voudrais que cette opération se fasse à l'évènement du mouseover.

    C'est vrai que ce n'est peut être pas très conventionnel ce que j'ai fait, mais pour tester, je suis allé au plus court. Je vais essayer de passer par une fonction javascript.

  13. #13
    Membre actif
    Homme Profil pro
    Conseil - Consultant en systèmes d'information
    Inscrit en
    Août 2008
    Messages
    557
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Bouches du Rhône (Provence Alpes Côte d'Azur)

    Informations professionnelles :
    Activité : Conseil - Consultant en systèmes d'information
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Août 2008
    Messages : 557
    Points : 286
    Points
    286
    Par défaut
    Mais c'est possible de faire passer une fonction sous un évènement onmouseover?

    en général je l'ai toujours fait sur des onclick et j'ai un doute du coup

  14. #14
    Expert éminent sénior

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 39
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Points : 79 912
    Points
    79 912
    Par défaut
    Oui, oui, bien entendu. Vous pouvez appeler une fonction sur le onmouseover aussi.

Discussions similaires

  1. Réponses: 9
    Dernier message: 24/06/2008, 10h45
  2. Réponses: 10
    Dernier message: 13/05/2008, 15h08
  3. Comment faire lorsque la requete est trop longue ?
    Par tabtab dans le forum Requêtes et SQL.
    Réponses: 16
    Dernier message: 26/03/2008, 15h55
  4. Comment faire clignoter le curseur avec ActionScript 2
    Par marcello2 dans le forum ActionScript 1 & ActionScript 2
    Réponses: 5
    Dernier message: 12/11/2007, 20h24
  5. Réponses: 3
    Dernier message: 13/09/2007, 19h11

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