I have an image (1000x1300 pixel) and want to overlay it with a grid with 10x10 pixel cells (so this would be 100x130 cells). Then there must be a way to click left mouse button, move over the grid an "mark" the underlying grid cells (i.e. change background color). At the time I have the following source code in jQuery

$(window).ready(function() {
    $("body").mousedown(function() { mstate = 1; }).mouseup(function() { 
        mstate = 0; 
    });
    var container = document.getElementById("grid");
    var divs = "";
    for (var y in grid) {
        divs += "<tr>";
        for (var x in grid[y]) {
            var class = "cellinactive";
            if (grid[y][x]==1) class = "cellactive";
            else if (grid[y][x]==2) class = "cellreserved";
            else if (grid[y][x]==3) class = "cellsold";
            divs += "<td class='" + class + "'>&nbsp;</td>";
        }
        divs += "</tr>";
    }
    divs = "<table>" + divs + "</table>";
    container.innerHTML = divs;
    $("#grid td").css({ "opacity": "0.7" }).html("").mouseover(function() {
        if (mstate == 1) {
            if (rgb2hex($(this).css("background-color")) == "#ffff00") 
                $(this).css("background-color", "#0ff");
            else 
                $(this).css("background-color", "#ff0");
        }
    });
});

var grid = "";
var mstate = 0;

grid contains an 2-dimensional array (size is 130x100). I tried to create a grid basing on DIVs, but that's much slower than TDs. Has anyone some hint to gain performance of this snippet? When testing in Firefox 4, that "click, hold down and moving" of mouse is not much performant, there are gaps when drawing continously a line. (Sorry when my english is not the best ;) Regards

I have an image (1000x1300 pixel) and want to overlay it with a grid with 10x10 pixel cells (so this would be 100x130 cells). Then there must be a way to click left mouse button, move over the grid an "mark" the underlying grid cells (i.e. change background color). At the time I have the following source code in jQuery

$(window).ready(function() {
    $("body").mousedown(function() { mstate = 1; }).mouseup(function() { 
        mstate = 0; 
    });
    var container = document.getElementById("grid");
    var divs = "";
    for (var y in grid) {
        divs += "<tr>";
        for (var x in grid[y]) {
            var class = "cellinactive";
            if (grid[y][x]==1) class = "cellactive";
            else if (grid[y][x]==2) class = "cellreserved";
            else if (grid[y][x]==3) class = "cellsold";
            divs += "<td class='" + class + "'>&nbsp;</td>";
        }
        divs += "</tr>";
    }
    divs = "<table>" + divs + "</table>";
    container.innerHTML = divs;
    $("#grid td").css({ "opacity": "0.7" }).html("").mouseover(function() {
        if (mstate == 1) {
            if (rgb2hex($(this).css("background-color")) == "#ffff00") 
                $(this).css("background-color", "#0ff");
            else 
                $(this).css("background-color", "#ff0");
        }
    });
});

var grid = "";
var mstate = 0;

grid contains an 2-dimensional array (size is 130x100). I tried to create a grid basing on DIVs, but that's much slower than TDs. Has anyone some hint to gain performance of this snippet? When testing in Firefox 4, that "click, hold down and moving" of mouse is not much performant, there are gaps when drawing continously a line. (Sorry when my english is not the best ;) Regards

• javascript
• jquery
• image
• grid
• overlay

1 Answer 1

You might find it easier to use DOM techniques rather than creating a string:

Live Demo

(Just a basic version, supports clicks but not drags)