Duda de código en imagenes al seleccionarlas

[AEP]

Hola antes que nada; mi duda es la siguiente:
Una página cómo http://www.infectedfx.net tiene un logo que al pasar el ratón encima cambia como si hiciera un focus, al maquetearlo ponen una imagen así http://www.infectedfx.net/wp-content/themes/shuffle/pix/logo.gif.
Lo que yo no entiendo es cómo pongo el código para hacer esto, ya que lo poniendo las imagenes separadas, así me ahorro tiempo.
Google, también tiene esto, acá pueden verlo https://mail.google.com/mail/images/2/5/c/icons3.png, la verdad no entiendo como hacen para poner 20 iconos y acomodarlos en la página. Me podrían explicar?.

Saludos,
AEP.

[kseso?]

Hola AEP
La idea es cargar sólo un archivo que contiene todas las imágenes y colocarlo como background con unas coordenadas específicas para que se vea una de las imágenes.
Para lograr el efecto lo que se hace es cambiar las coordenadas del background.

Pero te lo explico mejor con un ejemplo que Mikmoro tiene en su página
http://araudi.net/ejemplos/rollover_..._posicion.html

Si te fijas usa el mismo archivo para el fondo:

a {
background:transparent url(../img/color_BN.jpg) no-repeat scroll center top;
display:block;
height:100%;
width:100%;
}

a:hover {
background:transparent url(../img/color_BN.jpg) no-repeat scroll center bottom;
}

lógicamente, estos enlaces están contenidos en un div con una medidas tales que sólo muestra la imagen deseada.

Un saludo.

P.D.: Las gracias a Mikmoro y a DaPhyre que en su día me lo explicaron a mí

[AEP]

Entendido a la perfección, muy bien explicado. Muchas gracias kseso?

Un saludo.