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 :

Passer onMouseOver onMouseOut dans le script


Sujet :

JavaScript

Vue hybride

Message précédent Message précédent   Message suivant Message suivant
  1. #1
    Membre averti
    Homme Profil pro
    Webmaster
    Inscrit en
    Septembre 2016
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Septembre 2016
    Messages : 20
    Par défaut Passer onMouseOver onMouseOut dans le script
    bonjour
    je cherche a passer onMouseOver onMouseOut dans le script pour ne pas le laisser dans le html... je voudrais juste que la fonction marche qd l'on passe la souris sur une div avec un ID... comment faire?

    pour l'instant j'ai ca ds le javascript
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
        if (window.Am) {
            setTimeout(function() {
                InVeRsE();
            }, 1);
            return;
        }
    et ca ds le html

    onMouseOver="window.Am=1;" onMouseOut="window.Am=0;

    merci

  2. #2
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Exemple, il suffit de copier-coller le code dans un nouveau fichier HTML pour le tester :

    Code HTML : 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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="author" content="Daniel Hagnoul">
      <title>Test</title>
      <style>
        #bonjour {
          padding: 0.6rem;
          font-family: cursive;
          font-size: 1.4rem;
          border: 0.1rem dotted grey;
        }
      </style>
      <script>
        'use strict';
            
        document.addEventListener( 'DOMContentLoaded', function( ev ){
        
          var
            elemBonjour = document.querySelector( "#bonjour" );
            
          elemBonjour.addEventListener( "mouseenter", function( ev ){
            ev.target.style.color = "red";
          });
          
          elemBonjour.addEventListener( "mouseleave", function( ev ){
            ev.target.style.color = "black"
          });
          
        });
        
        window.addEventListener( 'load', function( ev ){
          // code
        });
      </script>
    </head>
    <body>
      <main>
        <div id="bonjour">
          <p>Bonjour !</p>
        </div>    
      </main>
    </body>
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  3. #3
    Membre averti
    Homme Profil pro
    Webmaster
    Inscrit en
    Septembre 2016
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Septembre 2016
    Messages : 20
    Par défaut
    merci daniel pour ta reponse mais je n'arrive pas à integrer ca dans mon script

    comment ferais tu? en te remerciant (je n'ai jamais appris le javascript)

    j'ai

    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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    var wdmax = 170;
    var hdmax = 145;
    var ImAgE = "abe.gif";
    var MiRoIr = "poeme-abe.gif";
    var wdmin = 0;
    var hdmin = 0;
    var inc = 5;
    var vIt = 50;
    var poI = 7000;
    var poM = 4000;
    var PoE = "PoS";
     
    function InVeRsE() {
        "use strict";
        if (window.Am) {
            setTimeout(function() {
                InVeRsE();
            }, 1);
            return;
        }
        if (PoE === "PoS") {
            var wd = document.getElementById("PE").width;
            wd = wd - inc;
            document.getElementById("PE").width = wd;
            if (wd === wdmin) {
                document.getElementById(PE").src = ImAgE;
                inc = -inc;
            }
            if (wd === wdmax) {
                PoE = "pOe";
                inc = -inc;
                setTimeout(function() {
                    InVeRsE();
                }, poI);
            } else {
                setTimeout(function() {
                    InVeRsE();
                }, vIt);
            }
        } else {
            var hd = document.getElementById("PE").height;
            hd = hd - inc;
            document.getElementById("PE").height = hd;
            if (hd === hdmin) {
                document.getElementById("PE").src = MiRoIr;
                inc = -inc;
            }
            if (hd === hdmax) {
                PoE = "PoS";
                inc = -inc;
                setTimeout(function() {
                    InVeRsE();
                }, poM);
            } else {
                setTimeout(function() {
                    InVeRsE();
                }, vIt);
            }
        }
    }
    window.onload = setTimeout(function() {
        "use strict";
        InVeRsE();
    }, 3000);
    et ma div
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    <div id="BoItE" style="width:170px;height:150px" onMouseOver="window.Am=1;" onMouseOut="window.Am=0;">
    <div id="ImAgE">
    <a href="#"><img id="PE" src="poeme-abe.gif" width="170" height="145" lang="aba"></a></div></div>

  4. #4
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Pour tester mon code, j'ai dû remplacer vos images (src) par d'autres.
    N'oubliez pas de faire la modification avant de tester mon code.

    Code HTML : 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
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    111
    <!DOCTYPE html>
    <html lang="fr" dir="ltr">
    <head>
      <meta http-equiv="cache-control" content="public, max-age=60">
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width, initial-scale=1">
      <meta name="author" content="Daniel Hagnoul">
      <title>Test</title>
      <style>
        #BoItE {
           width: 170px;
           height: 150px;
        }
      </style>
      <script>
        'use strict';
        
        var
          wdmax = 170,
          hdmax = 145,
          ImAgE = "../images/boule7.png",
          MiRoIr = "../images/boule1.png",
          wdmin = 0,
          hdmin = 0,
          vIt = 50,
          poI = 7000,
          poM = 4000,
          inc = 5,
          PoE = "PoS"
          
        function InVeRsE() {
          "use strict";
          
          if ( window.Am ){
            setTimeout( InVeRsE, 1 );
            return;
          }
          
          if ( PoE === "PoS" ) {
            var wd = document.getElementById("PE").width;
            
            wd = wd - inc;
            document.getElementById("PE").width = wd;
            
            if ( wd === wdmin ) {
              document.getElementById("PE").src = ImAgE;
              inc = -inc;
            }
            
            if ( wd === wdmax ) {
              PoE = "pOe";
              inc = -inc;
              setTimeout( InVeRsE, poI);
            } else {
              setTimeout( InVeRsE, vIt );
            }
          } else {
            var hd = document.getElementById("PE").height;
            
            hd = hd - inc;
            document.getElementById("PE").height = hd;
            
            if ( hd === hdmin ) {
              document.getElementById("PE").src = MiRoIr;
              inc = -inc;
            }
            
            if ( hd === hdmax ) {
              PoE = "PoS";
              inc = -inc;
              setTimeout( InVeRsE, poM );
            } else {
              setTimeout( InVeRsE, vIt );
            }
          }
        }
            
        document.addEventListener( 'DOMContentLoaded', function( ev ){
          
          var
            elemBoItE = document.querySelector( "#BoItE" );
          
          elemBoItE.addEventListener( "mouseenter", function( ev ){
            window.Am = 1;
          });
          
          elemBoItE.addEventListener( "mouseleave", function( ev ){
            window.Am = 0;
          });
          
        });
        
        window.addEventListener( 'load', function( ev ){
          
          setTimeout( InVeRsE, 3000 );
          
        });
      </script>
    </head>
    <body>
      <main>
        <div id="BoItE">
          <div id="ImAgE">
            <a href="#">
              <img id="PE" src="../images/boule1.png" width="170" height="145" lang="aba">
            </a>
          </div>
        </div>
      </main>
    </body>
    </html>

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  5. #5
    Membre averti
    Homme Profil pro
    Webmaster
    Inscrit en
    Septembre 2016
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Septembre 2016
    Messages : 20
    Par défaut
    Un grand merci Daniel ca à l'ai de marcher

  6. #6
    Membre averti
    Homme Profil pro
    Webmaster
    Inscrit en
    Septembre 2016
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Septembre 2016
    Messages : 20
    Par défaut
    Il y a juste un probleme avec safari, je vois que le mouse over avec ton code ne fonctrionne pas avec.... que faire?
    remarque c'est avec la version pour windows que j'ai testee et on ne trouve plus que celle de 2012


    sinon j'ai vu que tu utilises
    document.querySelector au lieu de document.getElementById

    me conseillerais tu de changer

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
            var wd = document.getElementById("PE").width;
            wd = wd - inc;
            document.getElementById("PE").width = wd;
            if (wd === wdmin) {
                document.getElementById("PE").src = ImAgE;
    par
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
            var wd = document.querySelector("#PE").width;
     
            wd = wd - inc;
            document.querySelector("#PE").width = wd;
     
            if (wd === wdmin) {
                document.querySelector("#PE").src = ImAgE;
    je vois que ca fonctionne aussi avec ce code
    en te remerciant

  7. #7
    Rédacteur

    Avatar de danielhagnoul
    Homme Profil pro
    Étudiant perpétuel
    Inscrit en
    Février 2009
    Messages
    6 389
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 74
    Localisation : Belgique

    Informations professionnelles :
    Activité : Étudiant perpétuel
    Secteur : Enseignement

    Informations forums :
    Inscription : Février 2009
    Messages : 6 389
    Billets dans le blog
    125
    Par défaut
    Si vous travaillez avec des navigateurs obsolètes (IE par exemple), il est préférable d'utiliser les anciennes méthodes.

    Vous pouvez aussi remplacer "mouseenter" par "mouseover" et "mouseleave" par "mouseout". Mais "mouseover" à un comportement différent, il s'active pour chaque déplacement du pointeur, c'est rarement l'effet recherché.

    Blog

    Sans l'analyse et la conception, la programmation est l'art d'ajouter des bogues à un fichier texte vide.
    (Louis Srygley : Without requirements or design, programming is the art of adding bugs to an empty text file.)

  8. #8
    Membre averti
    Homme Profil pro
    Webmaster
    Inscrit en
    Septembre 2016
    Messages
    20
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 68
    Localisation : France, Loire Atlantique (Pays de la Loire)

    Informations professionnelles :
    Activité : Webmaster

    Informations forums :
    Inscription : Septembre 2016
    Messages : 20
    Par défaut
    je vous remercie daniel pour tout ca, me reste à faire des tests
    merci encore

Discussions similaires

  1. Réponses: 1
    Dernier message: 05/01/2013, 20h41
  2. Faire passer un argument dans un script sql
    Par Dodo86 dans le forum Pentaho
    Réponses: 3
    Dernier message: 31/03/2010, 14h20
  3. allier onMouseOver, onMouseOut et onClick dans une seule fonction
    Par crypticcyco dans le forum Général JavaScript
    Réponses: 8
    Dernier message: 16/09/2008, 13h39
  4. Passer une variable dans une image via un script
    Par Lomig dans le forum Langage
    Réponses: 2
    Dernier message: 16/10/2006, 17h10
  5. Passer un paramètre dans le script
    Par ipeteivince dans le forum Windows
    Réponses: 2
    Dernier message: 02/03/2006, 17h00

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