animation_image_par_image_determinee_par_la_position_du

<html>
<head>
<title>
      Exemple HTML5 la position de la souris modifie une animation
    </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>