Evènement OnkeyDown + IE

Version imprimable

05/06/2008, 02h01
Chichoulinet

Evènement OnkeyDown + IE

Bonjour,

J'ai un problème sur le OnKeyDown ous IE. En effet, j'affecte une fonction Javascript sur cet évênement, et dans cette fonction je regarde la touche pressée (e.which), et je modifie les background des différentes DIV sur ma page

(pour résumer : j'ai un damier avec un personnage au centre, et le personnage bouge de case en case : -> 1 case = 1 DIV / -> image du personnage = background de la DIV / -> changement de case -> changement de background des 2 DIV's concernées).

Sous Firefox ça marche nickel, mais pas sous IE. J'ai essayé avec un table à la place des DIV, avec des images aussi, mais rien ne marche.
j'ai cherché un peu partout (FAQ comprise), et je n'ai trouvé aucune solution pour régler ça.

Quelqu'un pourrait-il m'éclairer ?
Merci beaucoup, je n'ai pas beaucoup de temps pour trouver une bonne solution.
05/06/2008, 09h15
E.Bzz

Bonjour,
on voit bien le fonctionnement normal, mais ... quel est le problème ?
(et le code concerné)

A+

Alors pour le problème, c'est dit dans mon message mais peut-être pas assez explicite : dans mes DIV, l'image de déplace bien sous Firefox, mais reste fixe sous IE (donc ça vient soit du OnKeyDown, soit des backgrounds des DIV qui sont mal pris en compte sous IE).

Voici le code du déplacement de l'image :

Code:

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
function keyDown(e)//Gestion des déplacements
{   
	e = e.which;
 
	switch (e)
	{
	    case 37:
	        if ((UserX == XMin) && (XMin == 0))
	            return;
	        document.getElementById("x"+UserX+"y"+UserY).style.background= "";
	        UserX--;
	        if (UserX < XMin)
	            scroll();
	        document.getElementById("x"+UserX+"y"+UserY).style.background= UserImage;
	        break;
	    case 38:
	        if ((UserY == YMin) && (YMin == 0))
	            return;
	        document.getElementById("x"+UserX+"y"+UserY).style.background= "";
	        UserY--;
	        if (UserY < YMin)
	            scroll();
	        document.getElementById("x"+UserX+"y"+UserY).style.background= UserImage;
	        break;
	    case 39:
	        if ((UserX == XMax) && (XMax == totalWidth))
	            return;
	        document.getElementById("x"+UserX+"y"+UserY).style.background= "";
	        UserX++;
	        if (UserX > XMax)
	            scroll();
	        document.getElementById("x"+UserX+"y"+UserY).style.background= UserImage;
	        break;
	    case 40:
	        if ((UserY == YMax) && (YMax == totalHeight))
	            return;
	        document.getElementById("x"+UserX+"y"+UserY).style.background= "";
	        UserY++;
	        if (UserY > YMax)
	            scroll();
	        document.getElementById("x"+UserX+"y"+UserY).style.background= UserImage;
	        break;
	}
}

Chaque DIV à un ID spécial qui lui est donné en fonction de 2 variables de position. Si on se déplace à gauche, on enlève le background de la DIV où se trouve le personnage, on change sa position et on affiche son image en background de la nouvelle position (on bouge seulement si on peut, à savoir si on est dans notre damier, sinon on fait une autre action scroll() mais ce n'est pas le problème ici...).

J'espère que ceci aidera à résoudre mon problème au plus vite.

Merci d'avance.

05/06/2008, 13h26
SpaceFrog

il est de quelle forme userImage ???
05/06/2008, 13h40
E.Bzz

Tu as essayé avec

Code:

document.getElementById("x"+UserX+"y"+UserY).style.backgroundImage= UserImage;

(background est un réceptacle commun pour toutes les propriétés de background, dont l'image) ?

A+
05/06/2008, 13h43
SpaceFrog

et userImage est il du format

Code:

"url('chemin')"
05/06/2008, 14h33
Chichoulinet
Tout d'abord merci pour ces réponses.

Donc pour les précision, oui UserImage est bien une chaine de caractère de type ""url('chemin')".
Et quand je met backgroundImage à la place de juste background ça ne change rien du tout.

Précision supplémentaire : j'aimerai pouvoir redimensionner mon image pour qu'elle rentre bien dans ma DIV. J'avais pensé à faire un
Code:

1 2 3 4 5 6 img = new image(); img.width = 40; img.height = 40; img.id = "x"+UserX+"y"+UserY //remplace l'id de la DIV maDIV.appendChild(img)
Cependant je ne sais pas si c'est très bien et si ça marcherai bien de faire comme ça (en fait j'ai testé et ça affiche un damier déformé)

Merci.
05/06/2008, 14h38
SpaceFrog

est tu sur de ton chemin pour l'image ?
05/06/2008, 14h40
Chichoulinet

Je viens de voir la solution à mon problème.
En fait IE ne doit pas prendre e.which de la même façon que FF.
Pour récupérer le code ascii c'est e.keyCode qu'il faut faire.
Merci quand même pour vos réponses