Clickable grid over image in Javascript and jQuery

admin管理员组
文章数量:1026989

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

$(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;

Share Improve this question edited May 15, 2011 at 19:19 casperOne 74.6k19 gold badges189 silver badges260 bronze badges asked May 15, 2011 at 19:16 rabudde 7,7426 gold badges57 silver badges93 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)

$(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;

$(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;

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)

本文标签： Clickable grid over image in Javascript and jQueryStack Overflow

版权声明：本文标题：Clickable grid over image in Javascript and jQuery - Stack Overflow 内容由热心网友自发贡献，该文观点仅代表作者本人，转载请联系作者并注明出处：http://it.en369.cn/questions/1745664501a2162096.html，本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。

369IT编程

Clickable grid over image in Javascript and jQuery - Stack Overflow

1 Answer 1

1 Answer 1

更多相关文章