Javascript 在图像上创建栅格覆盖
我制作了一个脚本（使用mootools库），该脚本应该用表格网格覆盖一个图像，当单击/拖动每个网格单元时，其背景颜色会“高亮显示”该单元 当前代码创建一个表并将其放置在元素上（在本例中为el、image）。使用这个表是因为我计划稍后添加矩形选择工具，这似乎是最简单的方法Javascript 在图像上创建栅格覆盖,javascript,mootools,Javascript,Mootools,我制作了一个脚本（使用mootools库），该脚本应该用表格网格覆盖一个图像，当单击/拖动每个网格单元时，其背景颜色会“高亮显示”该单元 当前代码创建一个表并将其放置在元素上（在本例中为el、image）。使用这个表是因为我计划稍后添加矩形选择工具，这似乎是最简单的方法 <html> <head> <title></title> <script type="text/javascript" src="mootools.js"&
<html>
<head>
<title></title>
<script type="text/javascript" src="mootools.js"></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;
//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();
});
</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>
</head>
<body>
<div id="imagetomapdiv">
<img id="imagetomap" src="1.png">
</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>
</body>
</html>
var SetGrid=功能（el、sz、nr、nc）{
//根据“网格”大小获取行/列数
numcols=el.getSize（）.x/sz；
numrows=el.getSize（）.y/sz；
//创建用于注入列/行的表元素
var gridTable=新元素（'表'{
'id'：'gridTable'，
“风格”：{
“宽度”：el.getSize（）.x，
“高度”：el.getSize（）.y，
“top”：el.getCoordinates（）.top，
“left”：el.getCoordinates（）.left
}
});
//将行/列注入gridTable
对于（row=1；row尝试在页面顶部添加docType dec，即：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
非常感谢，这很有效！IE仍然不会定期“在mouseover”触发事件，但这是我可以接受的。再次感谢！不要使用鼠标移到
/鼠标移出
。使用固定的（事件冒泡/委派问题）mouseenter
/mouseleave
。您甚至可以使用继电器，如lvlSelect.addEvent（“mouseover:relay（li）”）
来保持其清洁（如jquery.live）