Geek Answers Handbook

Create a mesh overlay

I created a script (using the mootools library) that should overlay the image on the grid of the table, and when each grid cell is clicked / dragged over its background, the color changes the selection of the cell.

The current code creates a table and positions it above the element (el, image in this case). The table has been used since I plan to add the rectangle selection tool later, and this seemed the easiest way to do this.

<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>

There are two problems: while it works fine, FF, IE and Chrome do not create a table if the page is being refreshed. If you return to the root of the directory and click on the link to the file, the grid table will be displayed, if you click the Refresh button, the script will be executed, but the table will not be entered.

-, HTML IE, . nbsp, , - .

.

!

+5
1

docType dec IE:

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

More articles:


All Articles