[SOLVED] Google IMages

[samona]

When I right click on the Google logo and select view image, an image containing all the images on the page gets produced instead of viewing just the Google logo.  Is that CSS?

[dropfaith]

they just hide the image the link to that image displays all of them 

 

seems odd to me tho wonder why they did it

[haku]

It's called CSS Sprites. By combining all the images, it reduces both overall filesizes as well as http requests to the browser, speeding up download time.

[sjmiller]

It's a very smart concept that is very efficient with regards to file sizes and request loads (as haku mentioned)

 

It's a very simple concept as well that you can use with CSS (yes, it is CSS).  One way to try and re-emulate such an effect is to try this is your code

 

.class {
    width: 40px;
    height: 40px;
    background: url("some/image.jpg") no-repeat 20px 20px;
}

 

All that does is it take the class named "class", which has a width of 40px and a height of 40px, then paste a background image (named image.jpg), which starts (or is anchored) 40px down the to the right, and 40px down the image (0px 0px is default, which anchors to the top left of the image, not the bottom).  So anything that is above and to the left of 40px in the image will not get displayed.  A simple way to explain it visually would be like such:

 

say this was an image

+-------------------+
|                   |
|                   |
|                   |
|       image       |
|                   |
|                   |
|                   |
+-------------------+

 

Now if we call this image and tack a background position of 10px 10px, it will only display what is 10px from the left, and 10px down of the image, so essentially, this is what you'll see of the image:

+-------------------+
|   not displayed   |
|    +--------------+
|    |              |
|    |              |
|    |  displayed   |
|    |              |
|    |              |
+----+--------------+

 

That's just a theoretical example, saying that to anchor point of the displayed portion was 10px down and to the right, but you should get the point.  So say in your image, you have 4 images within that image, each taking up a quarter (2 images in the top portion, 2 in the bottom), each image being exactly identical size wise, and all take up exactly a quarter of the image:

 

+---------+---------+
|         |         |
|    1    |    2    |
|         |         |
+---------+---------+
|         |         |
|    3    |    4    |
|         |         |
+---------+---------+

 

you could even specify 50% 50% for part 4 of the image or 0 50% for part 3 or %50 0 for part 2, (0 0 being part 1)

 

Hope this clarifies how that works!

[samona]

thank you all!!!!!!!!!!!!!!!!!!!!!