Question

我创建了一个脚本（使用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' : 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>

有两个问题：虽然在FF中工作得很好，但如果刷新页面，IE和Chrome都不会创建表格。如果你回到目录root并点击文件的链接，就会显示网格表，如果你点击'刷新'按钮 - 脚本会运行，但不会注入表。

其次，尽管表格HTML是在IE中注入的，但它不会显示它。我尝试添加nbsp以确保它不被忽略 - 无济于事。

对于改进代码或帮助解决问题的任何建议表示赞赏。

谢谢！

Answer 1

尝试在页面顶部添加docType dec：

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

在图像上创建网格覆盖

1 个答案: