Bonjour,

Je suis actuellement en train de coder un petit jeu sur le net. J'utilise Jquery et celui-ci ne fonctionne pas sur IE..
C'est plutôt embêtant vu que malheureusement un bon pourcentage des personnes sont sur IE...

Le but du code est d'afficher seulement une partie d'une carte en tant que background sur un Div. Ensuite grâce à des flèches sur les côtés je change la position du background et sa me permet de me déplacé sur la carte..

Voici le code de la page :

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
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
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
                    "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design2.css" />
  <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
   <script type="text/javascript" src="javascript.js"></script>
   <title>Test</title>
 
  <script type="text/javascript">  
  	$(document).ready(function(){
 
    	var posX = 500;
		var posY = 400;
 
		var tailleX = 1536;
		var tailleY = 1536;
		var affichageX = 500;
		var affichageY = 400;
 
		var zoom = 2;
 
		$(".haut .carte img").click(function(){
			posY = posY +300;
			if(posY > tailleY){
				posY=tailleY;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});
      	$(".bas .carte img").click(function(){
			posY = posY -300;
			if(posY < affichageY){
				posY=affichageY;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});
	  	$(".centre .gauche img").click(function(){
			posX = posX +300;
			if(posX > tailleX){
				posX=tailleX;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});
		$(".centre .droite img").click(function(){
			posX = posX -300;
			if(posX < affichageX){
				posX=affichageX;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});
	  	$(".haut .gauche img").click(function(){
			posY = posY +300;
			if(posY > tailleY){
				posY=tailleY;
			}
			posX = posX +300;
			if(posX > tailleX){
				posX=tailleX;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});
		$(".bas .gauche img").click(function(){
			posY = posY -300;
			if(posY < affichageY){
				posY=affichageY;
			}
			posX = posX +300;
			if(posX > tailleX){
				posX=tailleX;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});
	  	$(".haut .droite img").click(function(){
			posY = posY +300;
			if(posY > tailleY){
				posY=tailleY;
			}
			posX = posX -300;
			if(posX < affichageX){
				posX=affichageX;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});
      	$(".bas .droite img").click(function(){
			posY = posY -300;
			if(posY <affichageY){
				posY=affichageY;
			}
			posX = posX -300;
			if(posX < affichageX){
				posX=affichageX;
			}
			$(".carte").animate({backgroundPosition: '('+posX+'px '+posY+'px)'});
		});	
 
	});
  </script>
 
</head>
<body>
  <table class="total">
  		<tr class="haut">
			<td class="gauche"><img src="flechehautgauche.jpg"/></td>
			<td class="carte"><img src="flechehaut.jpg"/></td>
			<td class="droite"><img src="flechehautdroite.jpg"/></td>
		</tr>
		<tr class="centre">
			<td class="gauche"><img src="flechegauche.jpg"/></td>
			<td class="carte">&nbsp;</td>	
			<td class="droite"><img src="flechedroite.jpg"/></td>
		</tr>
		<tr class="bas">
			<td class="gauche"><img src="flechebasgauche.jpg"/></td>
			<td class="carte"><img src="flechebas.jpg"/></td>
			<td class="droite"><img src="flechebasdroite.jpg"/></td>
		</tr>
  </table>
  <span class="zoom">&nbsp;</span>
 
</body>
</html>
Pour vos informations javascript.js contient le contenu de cette page (code décompressé page 2)

Voici la page CSS :
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
.haut, .bas{
	height : 50px;
}
.centre{
	height : 400px;
	text-align : center;
}
 
.droite, .gauche{
	width : 50px;
}
.carte{
	width : 500px;
}
 
.centre .carte{
	width:500px;
	height:100%;
	margin-left: 50px;
 
	background : url(/image.jpg);
	background-position: 500px 400px;
}
tr{
	text-align : center;
}
image.jpg est une image de 1536*1536px
les flèches sont des images de 50*50px

J'ai suivis le post de cette page mais je trouves pas comment m'en sortir...

Si quelqu'un arrive à m'aider je l'en remercie énormément...