var a=[],b=[]
for(var i=0i<example.lengthi++){
if(example[i].substring(0,1)=="a"){
a.push(example[i])
break
}
if(example[i].substring(0,1)=="b"){
b.push(example[i])
break
}
}
也可以按照其他规则进行区分，看你的区分规则了。
两个方法，没现成代码，自己想办法搞：简单的：js判断鼠标在图片上时，产生一个div覆盖在图片上面，这个div给格子背景图
(兼容性好，但是格子尺寸固定，一张网页上多个不同尺寸图片上用，格子全一样大)
复杂的：js生成个html5的canvas画布，把图片放上去，再用js画些线条在上面
(无法顾及不支持html5的浏览器，但是格子尺寸你可以根据图片尺寸比例动态生成)
