jQuery image manipulation

Question

I want to draw gridlines of varying frequency on top of a static image in jquery, any suggestions as to the best/easiest approach - thanks!

Answer 1

Here's a very quick mockup that should help give you an idea of my take

var top = image.top;
var left = image.left;
var width = image.width;
var height = image.height;
var boxHeight = 10; //change this how tall you want each grid box to be
var boxWidth = 10; //same for width
gridtop = top;
gridleft = left;
while (gridtop < top + height); {
    gridtop += boxHeight;
    $('body').append('<div></div>').css('position', 'absolute').css('width', width).css('top', gridtop).css('left', left);
}
while (gridleft < left + width); {
    gridleft += boxWidth;
    $('body').append('<div></div>').css('position', 'absolute').css('height', height).css('left', gridleft).css('top', top);
}

Answer 2

// Specify the number of boxes
var verticalBoxes = 10;
var horizontalBoxes = 10;
var countBoxes = verticalBoxes*horizontalBoxes;

var imageHeight = img.height();
var imageWidth = img.width();

var boxHeight = imageHeight / verticalBoxes;
var boxWidth = imageWidth / horizontalBoxes;

// #grid needs to be relatively positioned
var grid = $('#grid').detach();
for(i = 0; i < countBoxes ; i++){
    grid.append('<div class=\'boxes\'></div>');
}

// This is the absolutely positioned container overlaying the image
$('#grid-container').append(grid);

$('head').append('<style>.boxes {outline:1px solid black; height:'+boxHeight+'px; width:'+boxWidth+'px; float:left; }</style>');

I believe this version is more performant, relies on the CSS box model rather than placing each box individually. However it specifies the number of boxes rather than box size...