BackgroundPosition & IE

BackgroundPosition & IE

Hi all, sorry but I don't speak english very well (I'm french) so I will be quick.


Here is my code :

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


design2.css :
.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;
}


javascript.js
/**
* @author Alexander Farkas
*/

(function($) {
   $.extend($.fx.step,{
       backgroundPosition: function(fx) {
            if (fx.state == 0 && typeof fx.end == 'string') {
                var start = $.curCSS(fx.elem,'backgroundPosition');
                start = toArray(start);
                fx.start = [start[0],start[2]];
                var end = toArray(fx.end);
                fx.end = [end[0],end[2]];
                fx.unit = [end[1],end[3]];
         }
            var nowPosX = [];
            nowPosX[0] = ((fx.end[0] - fx.start[0]) * fx.pos) + fx.start[0] + fx.unit[0];
            nowPosX[1] = ((fx.end[1] - fx.start[1]) * fx.pos) + fx.start[1] + fx.unit[1];           
            fx.elem.style.backgroundPosition = nowPosX[0]+' '+nowPosX[1];
           
           function toArray(strg){
               strg = strg.replace(/left|top/g,'0px');
               strg = strg.replace(/right|bottom/g,'100%');
               strg = strg.replace(/(\d+)(\s|\)|$)/g,"$1px$2");
               var res = strg.match(/(\d+)(px|\%|em|pt)\s(\d+)(px|\%|em|pt)/);
               return [parseFloat(res[1]),res[2],parseFloat(res[3]),res[4]];
           }
        }
   });
   
})(jQuery);


image.jpg is picture to 1536*1536px
flèches are pictures to 50*50px


This code do support by FF3 but not IE and FF2...

Pleas help

thank you