我创建了一个脚本(使用mootools库),该脚本应该用表格网格覆盖图像,当每个网格单元格被单击/拖动到其背景颜色时,会更改"突出显示"单元格.
当前代码创建一个表并将其定位在元素上(在本例中为el,image).由于我计划稍后添加矩形选择工具,因此使用了表,这似乎是最简单的方法.
<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' …