meta données pour cette page
  •  

Ceci est une ancienne révision du document !

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
<html>
<head>
<title>
      Exemple #1 HTML5 position de la souris avec style!
    </title>
     
<link href="../regles_css/mon_fichier.css" rel="stylesheet" type="text/css">
</head>
     
<body>
     
<img id=imageAnimation src="01.jpg" width="512" height="341" alt=""/>
 
 
<div id="coords"></div>
 
</body>
     
<script type="text/javascript">
 
var elmids = ['imageAnimation']; // l'identité de l'élément qui sera survolé par la souris
 
var x, y = 0;       // variables qui contiendront les coordonnées
var rougenoir = 132;
// Trouver les coordonnées X et Y de l'élément
     
function getXYpos(elm) {
  x = elm.offsetLeft;        // trouve le décalage en X de l'élément
  y = elm.offsetTop;         // trouve le décalage en X de l'élément
     
  elm = elm.offsetParent;    // stocker la valeur de offsetParent dans elm (pour l'alignement)
 
  // vérifie en boucle si elm est "null"
  // sinon, ajouter offsetLeft à x,
  // offsetTop à y et régler elm à son offsetParent
     
  while(elm != null) {
    x = parseInt(x) + parseInt(elm.offsetLeft);
    y = parseInt(y) + parseInt(elm.offsetTop);
    elm = elm.offsetParent;
  }
 
  // retourner un objet avec la position de "xp" (Gauche, l'axe des x), "=yp" (Dessus, l'axe des y)
  return {'xp':x, 'yp':y};
}
 
// Trouver les coordonnées en x et y et les afficher
function getCoords(e) {
 // coursesweb.net/
  var xy_pos = getXYpos(this);
 
  // si IE
  if(navigator.appVersion.indexOf("MSIE") != -1) {
    // Ajustements nécessaires avec IE
    var standardBody = (document.compatMode == 'CSS1Compat') ? document.documentElement : document.body;
 
    x = event.clientX + standardBody.scrollLeft;
    y = event.clientY + standardBody.scrollTop;
  }
  else {
    x = e.pageX;
    y = e.pageY;
  }
 
  x = x - xy_pos['xp'];
  y = y - xy_pos['yp'];
 
  // Affiche les coordonnées de x et y à l'élément 'coords'
  document.getElementById('coords').innerHTML = 'X= '+ x+ ' ,Y= ' +y;
  // Change l'image en fonction de la position du curseur
  numeroImage = Math.round(x/100);
  console.log(numeroImage);
  document.getElementById('imageAnimation').src = '0'+numeroImage+'.jpg';
}
 
// Pour chaque élément dans 'elmids', garder la valeur du déplacement de la souris.
for(var i=0; i<elmids.length; i++) {
  if(document.getElementById(elmids[i])) {
    // Appelle la fonction getCoords() lorsque la souris bouge
    document.getElementById(elmids[i]).onmousemove = getCoords;
  }
}
</script>
</html>