简单的：js判断鼠标在图片上时，产生一个div覆盖在图片上面，这个div给格子背景图
(兼容性好，但是格子尺寸固定，一张网页上多个不同尺寸图片上用，格子全一样大)
复杂的：js生成个html5的canvas画布，把图片放上去，再用js画些线条在上面
(无法顾及不支持html5的浏览器，但是格子尺寸你可以根据图片尺寸比例动态生成)
/** 将一个数组分成几个同等长度的数组
* array[分割的原数组]
* size[每个子数组的长度]
*/function sliceArray(array, size) {
var result = []
for (var x = 0 x < Math.ceil(array.length / size) x++) {
var start = x * size
var end = start + size
result.push(array.slice(start, end))
}
return result
}
切断一个是不可能了，不过你可以在盒子里面用js自动创建两个盒子，先取到盒子的id用document.getElementById("") 的方法，然后获取到他的宽度和高度，用document.getElementById("").offsetHeight和document.getElementById("").offsetWidth方法，然后在里面增加ID，function $id(){
var aa=document.getElementsByTagName('div')
for(i=0i<aa.lengthi++){
dlall[i].id=i
}
}
window.onload=$id
就这样
