Grid overlayed on image using javascript, need help getting grid coordinates_问答_开发者

I am trying to overlay a grid on top of an image and then be able to have the user click on the grid and get the grid coordinate from the box that the user clicked. I have been working with the code from the following stackoverflow question:

Creating a grid overlay over image. link text

Here is the code that I have so far:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

  </script>
  <script type="text/javascript"> var SetGrid = function(el, sz, nr, nc){

        //get number of rows/columns according to the 'grid' size
        //numcols = el.getSize().x/sz;
        //numrows  = el.getSize().y/sz;
        numcols = 48;
        numrows = 32;
        //create table element for injecting cols/rows
        var gridTable = new Element('table', {
            'id' : 'gridTable',
            'styles' : {
                'width' : el.getSize().x,
                'height' : el.getSize().y,
                'top' : el.getCoordinates().top,
                'left' : el.getCoordinates().left
            }
        });

        //inject rows/cols into gridTable
        for (row = 1; row<=numrows; row++){
            thisRow = new Element('tr', {
                'id' : row,
                'class' : 'gridRow'
            });
            for(col = 1; col<=numcols; col++){
                thisCol = new Element('td', {
                    'id' : col,
                    'class' : 'gridCol0'
                });

                //each cell gets down/up over event... down starts dragging|up stops|over draws area if down was fired
                thisCol.addEvents({
                    'mousedown' : function(){
                        dragFlag = true;
                        startRow = this.getParent().get('id');
                        startCol = this.get('id');
                    },
                    'mouseup' : function(){
                        dragFlag = false;
                    },
                    'mouseover' : function(){
                        if (dragFlag==true){
                            this.set('class', 'gridCol'+$$('#lvlSelect .on').get('value'));
                        }
                    },
                    'click' : function(){
                        //this.set('class', 'gridCol'+$$('#lvlSelect .on').get('id').substr(3, 1) );
                        str = $$('#lvlSelect .on').get('id');
                        alert(str.substr(2, 3)); 
                    }
                });
      开发者_JAVA百科          thisCol.inject(thisRow, 'bottom');
            };
            thisRow.inject(gridTable, 'bottom');
        };
        gridTable.inject(el.getParent());
 }

 //sens level selector func
 var SetSensitivitySelector = function(el, sz, nr, nc){
    $$('#lvlSelect ul li').each(function(el){
        el.addEvents({
            'click' : function(){
                $$('#lvlSelect ul li').set('class', '');
                this.set('class', 'on');
            },
            'mouseover' : function(){
                el.setStyle('cursor','pointer');
            },
            'mouseout' : function(){
                el.setStyle('cursor',''); 
            }
        });
    });
 }

 //execute
 window.addEvent('load', function(){
    SetGrid($('imagetomap'), 32);
    SetSensitivitySelector();
 });

 var gridSize = { 
 x: 48, y: 32
};

var img = document.getElementById('imagetomap');
    img.onclick = function(e) {
   if (!e) e = window.event;
    alert(Math.floor(e.offsetX/ gridSize.x) + ', ' + Math.floor(e.offsetY /         
    gridSize.y));
 }

</script>
<style>
    #imagetomapdiv { float:left; display: block; }
    #gridTable { border:1px solid red; border-collapse:collapse; position:absolute; z-index:5; }
    #gridTable td { opacity:0.2; filter:alpha(opacity=20); }
    #gridTable .gridCol0 { border:1px solid gray; background-color: none;   }
    #gridTable .gridCol1 { border:1px solid gray; background-color: green;  }
    #gridTable .gridCol2 { border:1px solid gray; background-color: blue;   }
    #gridTable .gridCol3 { border:1px solid gray; background-color: yellow; }
    #gridTable .gridCol4 { border:1px solid gray; background-color: orange; }
    #gridTable .gridCol5 { border:1px solid gray; background-color: red;    }
    #lvlSelect ul {float: left; display:block; position:relative; margin-left: 20px; padding: 10px; }
    #lvlSelect ul li { width:40px; text-align:center; display:block; border:1px solid black; position:relative; padding: 10px; list-style:none; opacity:0.2; filter:alpha(opacity=20); }
    #lvlSelect ul li.on { opacity:1; filter:alpha(opacity=100); }
    #lvlSelect ul #li0  { background-color: none;   }
    #lvlSelect ul #li1  { background-color: green;  }
    #lvlSelect ul #li2  { background-color: blue;   }
    #lvlSelect ul #li3  { background-color: yellow; }
    #lvlSelect ul #li4  { background-color: orange; }
    #lvlSelect ul #li5  { background-color: red;    }
</style>

</div>
<div id="lvlSelect">
    <ul>
        <li value="0" id="li0">0</li>
        <li value="1" id="li1">1</li>
        <li value="2" id="li2">2</li>
        <li value="3" id="li3">3</li>
        <li value="4" id="li4">4</li>
        <li value="5" id="li5" class="on">5</li>
    </ul>
</div>

In this example the grid box changes color when the image is grid box is clicked, but I would like to be able to have the coordinates of the box. Any help would be great. Thank you

Mootools solution using a click handler on the added gridTable and calculating the position.

function SetGrid(el) {
  var size = el.getSize();
  var coord = el.getCoordinates();

  var gridTable = new Element('table', {
    'id' : 'gridTable',
    'styles' : {
      'position': 'absolute',
        'width' : size.x,
        'height' : size.y,
        'top' : coord.top,
        'left' : coord.left
    }
  });

  var numcols = 48;
  var numrows = 32;
  var cellSize = {
    width: size.x / numcols,
    height: size.y / numrows
  }

  for (var row = 1; row<=numrows; row++){
      thisRow = new Element('tr', {
          'id' : row,
          'class' : 'gridRow'
      });
      for(var col = 1; col<=numcols; col++){
          thisCol = new Element('td', {
              'id' : col,
              'title': row + ' x ' + col,
              'class' : 'gridCol0'
          });
          thisCol.inject(thisRow, 'bottom');
      };
      thisRow.inject(gridTable, 'bottom');
  }

  gridTable.addEvents({
    // Add the click event to the gridTable
    click: function(e) {
      // Do something with the grid position.
      alert(Math.floor((e.client.x - coord.left) / cellSize.width)
            + ', ' + Math.floor((e.client.y - coord.top)/ cellSize.height));
    }
  });

  gridTable.inject(el.getParent());
}

JSBin demo: http://jsbin.com/ajava4/12