meta données pour cette page
  •  

Ceci est une ancienne révision du document !

<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>

</body>

<script type=“text/javascript”>

var elmids = ['leRectangle']; l'identité de l'élément qui sera survolé par la souris var x, y = 0; variables qui contiendront les coordonnées

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;

}

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>