jQuery manipulation d'image

Question

Je souhaite tracer un quadrillage de fréquence variable au-dessus d'une image statique dans jquery, des suggestions quant à l'approche la meilleure/la plus simple - merci!

Answer 1

Voici un mockup très rapide qui devrait aider à vous donner une idée de mon prendre

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>'); 

Je crois que cette version est plus performante, repose sur le modèle de boîte CSS plutôt que de placer chaque boîte individuellement. Cependant, il spécifie le nombre de boîtes plutôt que la taille de la boîte ...