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

Share Improve this question Follow edited May 15, 2011 at 19:19 casperOne 74.6k1919 gold badges189189 silver badges260260 bronze badges asked May 15, 2011 at 19:16 rabudderabudde 7,74266 gold badges5757 silver badges9393 bronze badges

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 6

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)