CSS/JavaScript to crop image - apresentar somente uma parte da imagem

Se você deseja carregar uma foto e trabalhar com várias partes dela, este é o caminho.

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!