How is this image sliced at the client side?

When you normally right-click over an image displayed on a Web page inside a Web browser, you get a context menu that has a menu item 'Save Image As'.

But if you right click on some images on some websites, the context menu doesn't display items that indicate that the image is one image. Instead, it displays 'View Background Image'.

If you view the background image, it turns out that the web application has one composite image that it has cached and then probably at client side, it slices and dices that image into separate tags.

For example, if you go to any thread on the Writers website of Stack Exchange, like this one:

https://writers.sta开发者_Go百科ckexchange.com/questions/3102/how-can-i-make-a-story-bigger

And right-click on the facebook icon and view the background image, you get this image:

http://cdn.sstatic.net/Skins/sketchy/img/sprites-beta.png?v=2

Similarly, if you go to a website that has the shareThis widget, like this:

http://sathyaish.net/

On the extreme top-right corner, there is this shareThis widget image. If you right-click on that image and view the background image, it looks like this:

http://w.sharethis.com/share4x/images/service-icons-sprite.png

1) I want to know what technology is used to achieve this and how may I learn to do it?

2) Secondly, how do I become good at JavaScript? How do I learn all these tricks? Which books should I start reading that will make me good at JavaScript?

---

See the word "sprite" in both the image urls? That's is what you are looking for.

Sadly, the technique is often used for content images — placing performance over correct HTML.

---

While you can get general tutorials on CSS Sprites (as Quentin pointed out), you might also want to check GWT ImageBundle Design doc which details how the idea was incorporated into Google Web Toolkit