11550 sujets

JavaScript, DOM et API Web HTML5

Bonjour,
J'ai un script en Javascript qui fonctionne sous IE mais qui ne marche pas sous Firefox et je suppose sous d'autre navigateur.
En fait je souhaiterai faire suivre le mouvement de la souris par une petite image.
Je joins mon code ci-dessous.
Voilà je ne sais pas pourquoi pourriez vous m'aider s'il vous plaît ?
Merci de votre retour, bonne soirée,
A+ Fred Smiley cligne Smiley cligne

//****fichier Javacsript .js apelé depuis HTML
var isNS = (navigator.appName == "Netscape" && parseInt(navigator.appVersion) >= 4);
var div1 = (isNS) ? document.obj1 : document.all.obj1.style;
var div2 = (isNS) ? document.obj2 : document.all.obj2.style;
var objet;var coord;var coordb = 800;
objet = new Array(div1,div2);coord = new Array();
coord[0]=50;coord[1]=50;
function placeObj(i,px,py) {
objet.left=px;
objet[i].top=py;
}
function voirObj(i) {
objet[i].visibility="visible";
}
function cacheObj(i) {
objet[i].visibility="hidden";
}
var userAgent=navigator.appName + " " + navigator.appVersion;
var agentInfo=userAgent.substring(0, 12);
if(agentInfo >= "Netscape 4.0")
{
document.captureEvents(Event.MOUSEMOVE);
var Xpos = 50;var Ypos = 50;
function MouveA(evnt) {
Xpos = evnt.pageX;Ypos = evnt.pageY;
}
document.onMouseMove = MouveA;
}
else {
var Xpos = 50;var Ypos = 50;
function MouveB() {
ofy=document.body.scrollTop;ofx=document.body.scrollLeft;
Xpos = event.clientX+ofx;Ypos = event.clientY+ofy;
}
document.onmousemove = MouveB;
}

function vole() {
x0=coord[0];y0=coord[1];ex=Xpos;ey=Ypos
reelx=x0+0.04;reely=y0+2.04;
rx=reelx;ry=reely;
rx+=(ex-rx)*0.04;ry+=(ey-ry)*0.04;
reelx=rx;reely=ry;
x0=Math.round(reelx);y0=Math.round(reely);
coord[0]=x0;coord[1]=y0;
if (x0<=Xpos) {voirObj(0);cacheObj(1);}
else {voirObj(1);cacheObj(0);}
placeObj(0,x0-22,y0-37);placeObj(1,x0-22,y0-37);
setTimeout ("vole()",15)
}
vole();

//******** HTML
<div id="obj1" style="position:absolute;left:0px;top:0px;width:41px;height:35px;visibility:hidden;">
<img src="./f16d.gif" border=0 width="100" height="60">
</div>
<div id="obj2" style="position:absolute;left:0px;top:0px;width:41px;height:35px;visibility:hidden;">
<img src="./f16g.gif" border=0 width="100" height="60">
</div>

<SCRIPT LANGUAGE="javascript" src="./f16.js"></script>


[/i][/i][/i]
Bonjour et bienvenue parmi nous Smiley smile

En tant que modérateur, je me dois de te faire remarquer que tu n'as malheureusement pas respecté l'une des Règles de base du forum qui est d'afficher les codes et exemples proprement à l'aide des boutons [ code]... ici ton code HTML, CSS, PHP, etc.[ /code] (sans espace).

Je te remercie par avance de bien vouloir éditer ton message afin de le rendre conforme à cette règle. Smiley cligne

D'ailleurs, je rappelle que le lien qui apparaît en bandeau tout en haut du forum ("Nouveau sur le forum ?...") est important. Il contient des pistes de recherche, des indications sur les règles de vie de la communauté, etc.
Il serait courtois de ta part de bien vouloir en prendre connaissance.

Bonne continuation Smiley smile

upload/1-code.gif

P.S. : attention à l'indice i dans les tableaux (voir le sujet d'annonce de ce salon).
Je n'ai pas lu ton code, car tu n'as pas encore respecter les règles du forum.

Néanmoins, je te fourni un code que j'ai produit qui déjà t'aidera peu être. C'est un code qui permet d'avoir les coordonnées de la souris sur la page que je pense avoir optimisé.


/**
 * Mouse Move Capture Utility
 * Just include this javascript and call the 2 var mouseX & mouseY when you want !
 * 
 * You can say that this script is very long... But it's optimized !
 * Optimized because the test about the method to get mouseX and mouseY is not perform
 * each time you move your mouse, but just once (the first time you move your mouse) !
 * 
 * You can enable debuging with the variable 'debutMousePosition'
 * @author MoOx <contact@moox.fr>  http://mr.moox.fr/dev
 
 * @copyright (C) 2006 MoOx
 */
 
 // Set true to enable debuging
 var debutMousePosition = false,
 // Mouse Position var
 mouseX,
 mouseY;
 
function detectMouseXY(e) {
    if (e && e.pageX) { // && event.pageY
        position = function (e) {
            mouseX = e.pageX;
            mouseY = e.pageY;
            if (debutMousePosition) {
                window.status = "Mouse Position X:"+mouseX+" / Y:"+mouseY;
            }
        };
    } else {
        if (document.body.scrollLeft) { // && document.documentElement.scrollTop
            position = function (e) {
                mouseX = event.clientX + document.body.scrollLeft;
                mouseY = event.clientY + document.body.scrollTop;
                if (debutMousePosition) {
                    window.status = "Mouse Position X:"+mouseX+" / Y:"+mouseY;
                }
            };
        } else {
            // Maybe document.documentElement.scrollLeft exists... :s
            position = function (e) {
                mouseX = event.clientX + document.documentElement.scrollLeft;
                mouseY = event.clientY + document.documentElement.scrollTop;
                if (debutMousePosition) {
                    window.status = "Mouse Position X:"+mouseX+" / Y:"+mouseY;
                }
            };
        }
    }
    window.document.onmousemove = position;
}

//For the ooolddddd Netscape... [smile]
if(window.navigator.appName.substring(0,3) == "Net")
	window.document.captureEvents(Event.MOUSEMOVE);
    
window.document.onmousemove = detectMouseXY;

Modifié par MoOx (28 Apr 2007 - 14:06)
Salut MoOx,

Ta solution est intéressante, et elle permet d'avoir la position de la souris à tout moment. Néanmoins, elle ajoute un événement mouseMove qui me parait un peu inutile et potentiellement consommateur de ressources.

De plus, tu utilises des variables globales et des événements DOM-0 avec les problèmes d'écrasement que ça peut engendrer.

Et que se passe-t-il si e.pageX vaut 0 quand detectMouseXY est appelée ? Smiley cligne

Pour ma part, je trouve la solution de Peter-Paul Koch très bien (mais certes moins élaborée Smiley smile ).
Modifié par Julien Royer (01 Mar 2007 - 23:01)
C'est pas faut que cela consomme peut être de la ressource.

En tout cas cela en consomme que si on fait le test à chaque fois que la souris bouge !

Je vais jeter un coup d'oeil au code ci-dessus et voir si on peut trouvé un compromis.

Puis après, cela dépend du besoin du développeur. Smiley cligne