[Jquery] Ne fonctionne pas sous IE

**CactO_o's** · 29/07/2008, 00h26

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

Invité · 29/07/2008, 14h34

Bonjour,

Dans le CSS,

Code :

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

position: absolut;

en

Code :

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

position: absolute;

A+

**CactO_o's** · 29/07/2008, 15h09

Problème au moment de l'envoi...

Quelqu'un peut supprimer ce message ?

Invité · 29/07/2008, 15h11

Re,

Peux-tu mettre un lien que l'on puisse voir ce que cela affiche?

A+

**CactO_o's** · 29/07/2008, 19h11

http://dev-gta.ifrance.com

Invité · 29/07/2008, 22h21

Salut,

En regardant FireBug, le html donne pour le td avec class="carte"

Code :

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

<td class="carte" style="background-position: 2036px 2772px;"/>

C'est pas beau !

Préférable:

Code :

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

<td class="carte" style="background-position: 2036px 2772px;"></td>

Moi, je dirais qu'il y a un pb dans la gestion de cette cellule

A+

**CactO_o's** · 29/07/2008, 15h09

Ups, désolé...

Cette ligne n'existait pas dans la version normal... Il ne faut pas y prendre compte... Elle y était juste au moment ou j'ai fait le copier/coller pour le forum et j'ai plus pensé qu'elle était ici...

J'ai fait aussi quelques modifications dans la page HTML afin de la rendre valide (je ne pense pas qu'il y ai du changement pour la suite des évenements)

[Jquery] Ne fonctionne pas sous IE

jQuery

Vue hybride

Discussions similaires

Partager

Partager