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