Problème de sélection des cases sur une carte isométrique

Code :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">



<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

    <head>

        <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

        <title>Mon village</title>

        <script type="text/javascript">

            function map(id, x_ori, y_ori) {

                var conteneur = document.getElementById(id);

                var contenu   = '';

                

                var x_norm = x_ori;

                

                for( y=1; y <= 9; y++ )        

                {    

                    var y_norm = y_ori;

                    for( x=1; x <= 9; x++ )

                    {

                        index = y*9+x;

                        

                        contenu += '<div id="tile'+index+'"" style="position : relative;width: '+ 82 +'px; height: ' + 82 + 'px; top:' +(((x-1)+(y-1))*20) + 'px; left:' + ((x+(9-y))*(41-1)-41+1) + 'px; margin: 0px 0px  -' + (82) + 'px 0px;">';

                        

                        contenu += '<img style="z-index: ' + (index*5) + ';" id="' + index + '" alt="' + x_norm + ':' + y_norm + '" src="000.png" />';



                        contenu += '</div>';

                        

                        y_norm++;

                    }

                    x_norm++;

                }



                for( y=1; y <= 9; y++ )        

                {    

                    var y_norm = y_ori;

                    for( x=1; x <= 9; x++ )

                    {

                        index = y*9+x;

                                               

                        contenu += '<div id="tile'+index*21+'"" style="position : relative;width: '+ 82 +'px; height: ' + 41 + 'px; top:' +(((x-1)+(y-1))*20+41) + 'px; left:' + ((x+(9-y))*(41-1)-41+1) + 'px; margin: 0px 0px  -' + (41) + 'px 0px;">';

                        

                        contenu += '<img style="border: solid black 1px;z-index: ' + (index*6+1) + '; opacity : 0.5;" id="' + index*6 + '" alt="' + x_norm + ':' + y_norm + '" src="cursor.png" onmouseover="this.style.opacity =\'0\';" onmouseout="this.style.opacity =\'0.5\';" />';



                        contenu += '</div>';

                        y_norm++;

                    }

                    x_norm++;

                }



                

                conteneur.innerHTML = contenu;

            }

        </script>

    </head>

    <body onload="map('carte', '1', '1');">

        <div id="carte"></div>

    </body>

</html>