Discussion :

[Elwynn]

Bonjour,

Tout d'abord je suis débutant en html et script ... (et nouveau ici donc ... pas taper ... )

Je viens de créer sous front-page un site que je vais bientôt héberger sur free ... (en attente de confirmation de leur part mais bon ...)

Un seul problème. Un de mes scripts, qui fonctionne très bien sur Internet explorer, ne marche "évidemment" pas sous firefox. Je connais en effet plus ou moins le problème de compatibilité entre les navigateurs, mais je me suis laissé entendre dire qu'il existait peut-être un moyen de pouvoir l'éditer pour l'utiliser sur tous ...

Ma question est donc (dsl si on vous la pose souvent mais je n'ai rien trouvé ailleurs pour cette question précise sinon, merci de me dire où ...) :

- Est-il possible de rendre le script suivant, compatible avec firefox et internet explorer ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<SCRIPT>
<!-- Begin
Image0 = new Image();
Image0.src = "bulles.gif";
Amount = 20;
Ymouse = -50;
Xmouse = -50;
Ypos = new Array();
Xpos = new Array();
Speed = new Array();
rate = new Array();
grow = new Array();
Step = new Array();
Cstep = new Array();
nsSize = new Array();
ns = (document.layers)?1:0;
(document.layers)?window.captureEvents(Event.MOUSEMOVE):0;
function Mouse(evnt) {
Ymouse=(document.layers)?evnt.pageY-20:event.y-20;
Xmouse=(document.layers)?evnt.pageX:event.x;
}
(document.layers)?window.onMouseMove=Mouse:document.onmousemove=Mouse;
for (i = 0; i < Amount; i++) {
Ypos[i] = Ymouse;
Xpos[i] = Xmouse;
Speed[i] = Math.random()*4+1;
Cstep[i] = 0;
Step[i] = Math.random()*0.1+0.05;
grow[i] = 8;
nsSize[i] = Math.random()*15+5;
rate[i] = Math.random()*0.5+0.1;
}
if (ns) {
for (i = 0; i < Amount; i++) {
document.write("<LAYER><img src="+Image0.src+" name='N' width="+nsSize[i]+" height="+nsSize[i]+"></LAYER>");
   }
}
else {
document.write('<div><div>');
for (i = 0; i < Amount; i++) {
document.write('<img id="si" src="'+Image0.src+'">');
}
document.write('</div></div>');
}
function MouseBubbles() {
var hscrll = (document.layers)?window.pageYOffset:document.body.scrollTop;
var wscrll = (document.layers)?window.pageXOffset:document.body.scrollLeft;
for (i = 0; i < Amount; i++){
sy = Speed[i] * Math.sin(270 * Math.PI / 180);
sx = Speed[i] * Math.cos(Cstep[i] * 4);
Ypos[i] += sy;
Xpos[i] += sx;
if (Ypos[i] <40> 24) grow[i] = 25;
}
setTimeout('MouseBubbles()', 10);
}
MouseBubbles();
//  End -->
</script>

Le script présenté ci-dessus est censé faire apparaitre une série de petites bulles semblant s'échapper de la souris du visiteur de mon site. Il marche très bien sous internet explorer mais sous firefox, il affiche une seule grosse bulle statique en haut à gauche de l'écran. (synonyme de non-fonctionnement).

Je comprendrai si par malheur pour moi vous n'aviez aucunement envie de faire mes exercices à ma place (cf. rêgles du forum) ... mais je suis en plein apprentissage du html (avant javascript ... normal quoi) et je ne souhaitais pas attendre des lunes et des lunes avant de savoir pallier seul au problème. En effet mon site ne peut attendre.

Si une âme charitable pouvais m'en apprendre plus, voire même refaire généreusement ce code à ma place (si c'est possible bien sur), je lui en serai extrêmement ... Extrêmement reconnaissant.

D'avance merci ...

-------------------------------------------------------------------------

Ps : si ça peux aider, je met ici la liste des erreurs survenant dans la console d'erreur firefox :

- Erreur : event is not defined
Fichier source : file:///F:/Mes%20documents/ (etc etc ...) .htm
Ligne : 121 (cette erreur apparait plusieurs fois)

- Avertissement : Propriété « filter » inconnue. Déclaration abandonnée.
Fichier source : file:///F:/Mes%20documents/ (etc etc ...) .htm
Ligne : 0

- Avertissement : Élément référencé par son ID/NAME dans le contexte global. Utilisez la propriété standard du W3C « document.getElementById() » à la place.
Fichier source : file:///F:/Mes%20documents/ (etc etc ...) .htm
Ligne : 167

ET ENFIN ...

- Erreur : si[i] has no properties
Fichier source : file:///F:/Mes%20documents/ (etc etc ...) .htm
Ligne : 167

[SpaceFrog]

Dans les contributions il y a un script avec une source de traitement de position de souris crossbrowser ...

[Elwynn]

Merci de ta réponse pour le moins rapide spacefrog. Mais ...

Je ne comprends pas tout désolé ... Sans doute l'heure tardive ...

- Pourrais-tu s'il te plait être un peu plus explicite ? Contributions ?? Crossbrowser ?? C'est du grec ancien pour moi ...

J'immagine que tu parles que sur le forum il y a des explications censées m'aider à comprendre le phénomène mais je n'ai rien trouvé mis à part un seul sujet dans contributions et ... comment dire ... Ca ne m'as pas aidé. Suis-je trop stupide pour faire un rapprochement ente les dux sujets ? ...

Je te rappelle que mon niveau est ... Bas. Très bas même dans ce dommaine ...

Bref, je ne voudrai pas être un boulet, mais plus d'explications seraient les bienvenues ...

Merci à toi tout de même, ça fait plaisir d'avoir une réponse dans ces délais ... En espérant une nouvelle chance tout aussi rapide, je te souhaite une bonne nuit ...

[SpaceFrog]

Ce qui se passe, et ça je pense que tu l'as compris pas toi même, est que les différents browser (navigateur) n'utilisent pas les mêmes instructions et syntaxes pour la gestion de la position du curseur de souris.
Il faut donc pour rendre un code crossbrowser (qui focntionne sous les différents navigateurs) avoir les codes pour chaque navigateur et tester le navigateur...
Ci dessous un exemple:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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
<HTML> 
<HEAD> 
 
<SCRIPT LANGUAGE="JavaScript"><!-- 
/*the old way 
 
if (navigator.appName == 'Netscape') { 
document.captureEvents(Event.MOUSEMOVE); 
document.onmousemove = netscapeMouseMove; 
} 
 
function netscapeMouseMove(e) { 
if (e.screenX != document.test.x.value && e.screenY != document.test.y.value) { 
document.test.x.value = e.screenX; 
document.test.y.value = e.screenY; 
} 
} 
 
function microsoftMouseMove() { 
if (window.event.x != document.test.x.value && window.event.y != document.test.y.value) { 
document.test.x.value = window.event.x; 
document.test.y.value = window.event.y; 
} 
} */
 
/* THE NEW WAY */
var e
function getMouse(e){
	var x,y;
	var elt = document.documentElement;
	if ( document.captureEvents ) {
		x = e.pageX;
		y = e.pageY;
	} else if ( window.event.clientX ) {
		x = window.event.clientX+elt.scrollLeft;
		y = window.event.clientY+elt.scrollTop;
	}
	window.mouseX = x;
	window.mouseY = y;
document.test.x.value = x; 
document.test.y.value = y; 
 
}
//(window.document.attachEvent)    ? window.document.attachEvent("onmousemove", getMouse) : window.addEventListener("mousemove", getMouse, false);
function populate(){document.onmousemove=function(event){getMouse(event)}}
//--></SCRIPT> 
 
</HEAD> 
 
<BODY  onload='populate()' > <!--mousemove="getMouse(event)"> <!-- onmousedown="microsoftMouseMove()" onmouseup="microsoftMouseMove()" --> 
 
<FORM NAME="test"> 
X: <INPUT TYPE="TEXT" NAME="x" SIZE="4"> Y: <INPUT TYPUE="TEXT" NAME="y" SIZE="4"> 
</FORM> 
 
</BODY> 
</HTML>

EN première partie un ancien code mais je le trouve plus explicite que la nouvelle version en dessous ... Etudie d'abord le premier code, ensuite l'autre te semblera plus abordable ...