CSS Script Sprite chart dynamic change background

Recently learned sprite diagram, CSS script. Then do it yourself and find it fun, you can make a picture of all the pictures, and then change the value of background-position to show different backgrounds.

After I have done, I found that I used to do the click or hover and so on, etc. event change img can use a picture, no longer look for icons/(ㄒoㄒ)/~~ moved

First put down the effect:

This is four Li, the requirement is to click each Li will change the corresponding background, the result is this →_→

Here is the implementation method, super Simple ~ If you do not yourself PS Sprite diagram

1. First make a sprite map of all the pictures you need, like this?

2. Generate a CSS file for each image, generate the picture comes with, I use one on GitHub, have the opportunity to want to do it myself

3. You can start writing code, and it's easy to get ready for the job.

HTML section:

CSS section:

JavaScript section:

OK, this is OK, in IE7/8/9/10 Chrome Firefox is available below.

Today in the group to see the compatibility of Backgroundposition, Firefox under the Background-position-x (Y) This type of individual is incompatible, and then spit slot for Firefox to write a lot of code hahaha

CSS Script Sprite chart dynamic change background