Passer onMouseOver onMouseOut dans le script

Version imprimable

25/09/2016, 15h13
pouemes

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:

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

Exemple, il suffit de copier-coller le code dans un nouveau fichier HTML pour le tester :

Code:

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>

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:

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:

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>

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:

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>

26/09/2016, 23h25
pouemes

Un grand merci Daniel ca à l'ai de marcher

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:

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:

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

27/09/2016, 10h33
danielhagnoul

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é.
27/09/2016, 10h40
pouemes

je vous remercie daniel pour tout ca, me reste à faire des tests
merci encore