我正在尝试在图像上叠加一个网格，然后让用户单击该网格并从用户单击的框中获取网格坐标。我一直在处理来自以下 stackoverflow 问题的代码:
在图像上创建网格叠加层。 link text
这是我目前的代码:
<!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));
}
});
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>
在此示例中，单击图像时网格框会更改颜色，但我希望能够获得框的坐标。任何帮助都会很棒。谢谢
最佳答案
Mootools 解决方案在添加的 gridTable 上使用点击处理程序并计算位置。
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 演示: http://jsbin.com/ajava4/12
关于javascript - 使用javascript在图像上覆盖网格，需要帮助获取网格坐标，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/4587761/