Image explanation

gistfile1.css

span {
    display: inline-block;
    background: url(IMAGE);
    width: 156px;
    height: 154px;
    border: 1px solid blue;
}

gistfile2.css

span {
    display: inline-block;
    background-image: url(IMAGE);
    background-position: -4px -3px;
    width: 153px;
    height: 150px;
    border: 1px solid blue;
}

gistfile3.css

span:hover {
    background-position: right 0;
}

gistfile4.css

span:hover {
    background-position: -158px 0;
}

gistfile5.css

span:hover { /* HOVERED */
    background-position: -39px 0;
}
span:active { /* CLICKED */
    background-position: -78px 0;
}

gistfile6.css

span {
    display: inline-block;
    background-image: url(prev-65x75.png);
    width: 65px;
    height: 75px;
}
span:hover {
    background-position: right 0;
}
span:active {
    background-position: 0 bottom;
}
span[disabled], span[disabled]:hover, span[disabled]:active {
    background-position: right bottom;
}