Eu estava querendo carregar uma image e trabalhar com pedaços dela, assim não precisaria carregar a imagem toda vez.
Ex. Estava querendo pegar pedaços do arquivo abaixo, e de acordo com o resultado eu mudaria a imagem e por consequente iria mostart verde, amarelo ou vermelho. As image foi retirada do site http://pixabay.com/static/uploads/photo/2012/04/24/17/57/tick-40678_640.png?attachment e após reduzi o tamanho para as minhas necessidades
encontrei neste site http://stackoverflow.com/questions/12789818/css-javascript-to-crop-image os passos para como fazer.
HTML
<div id='crop-the-cats'>
<img src='http://pixabay.com/static/uploads/photo/2012/04/24/17/57/tick-40678_640.png'> < /div>
CSS
#crop-the-cats {
width: 19px;
height: 18px;
overflow:hidden;
position:relative;
}
#crop-the-cats img {
position: absolute;
top: -0px;
left: -38px;
}
Assim vou automatizar, de acordo com o resultado da minha pesquisa mudo somente o left da imagem para apresentar a imagem correspondente.
Outra fonte de referência bem interessante: http://www.w3schools.com/css/css_image_sprites.asp
Fica a dica!
