Rollover sobre varias imágenes

[RabidFish]

Hola.
A ver supongamos que tengo este código HTML para mostrar las thumbnails de las imágenes de una galería:

Código HTML:

<table>
	<tr>
		<td><div id="foto01"><a href="fotos/galeria1/01.jpg"></a></div></td>
		<td><div id="foto02"><a href="fotos/galeria1/02.jpg"></a></div></td>
	</tr>
</table> 

Y este CSS para lograr un rollover:
table div {width:100px; height:100px;}
table div a {width:100px; height:100px; display:block;}
#foto01 {background-image:url(fotos/galeria1/thumb1-01.jpg);}
#foto01:hover {background-image:url(fotos/galeria1/thumb2-01.jpg);}
#foto02 {background-image:url(fotos/galeria1/thumb1-02.jpg);}
#foto02:hover {background-image:url(fotos/galeria1/thumb2-02.jpg);}

Bien, esa sería una solución sin JS. Pero si yo tengo muchas galerías y por lo tanto muchas imágenes, debería repetir esas reglas de CSS para cada imagen en un div con ID diferente. Si tengo 80 imágenes, serían 160 líneas en el archivo CSS haciéndolo muy pesado.

Mi pregunta es si hay alguna manera usando JS que tome la ruta del fondo del div (este div que sea una clase común a todas las imágenes donde quiero el efecto) y que al pasar el mouse (onmouseon supongo que sería) cambie la ruta de ese fondo por otra. En este casi debería cambiar fotos/galeria1/thumb1-01.jpg por fotos/galeria1/thumb2-01.jpg.

Espero que se entienda. Saludos.