Rollover sobre varias imágenes

[RabidFish]

Hola a todos.
Quiero hacer un efecto de rollover sobre las imágenes (thumbnails) de una galería que consiste en cargar otro thumbnail en su lugar con los colores alterados (es decir al pasar el mouse cambia la imagenpor una igual con distintos colores). El tema es que si lo hago con capas y CSS, tengo que crear una capa (div) con ID específico para cada imagen y cargar la URL de los fondos (uno cuando no está el mouse encima y otro en el hover), lo que me hace super pesado el archivo CSS teniendo en cuenta que son casi 100 imágenes. ¿Hay alguna forma de hacer este efecto con JavaScript sin utilizar demasiado código? Las imágenes están de acuerdo a su galería en una subcarpeta y numeradas 01, 02, 03... etc. en formato JPG.
Un saludo.

[_cronos2]

¿Podrías poner un ejemplo un poco más claro por favor? Entendí parte de tu petición pero no toda
Saludos (:

[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.

[_cronos2]

A ver así:

Código HTML:

<div onmouseover="this.style.backgroundImage = this.nextElementSibling.href.replace(/(\d{2,}\.jpg)$/, 'thumb2-$1');"><a href="fotos/galeria1/01.jpg"></a></div>
 

Saludos (:

[Adler]

Hola

Aunque la respuesta de @_cronos2 (¿Qué tal colega?) es correcta. En algún caso puede que el rollover no sea muy fluido. Para que sea fluido, puedes insertar todas las imágenes un una sola. Con la propiedad css background-position muestras las imágenes y con javascript cambias dicha propiedad

Código Javascript:

<style>
#img1 a img, #img2 a img, #img3 a img, ....... { 
background: url("sprite.jpg");
background-repeat: no-repeat;
}
 
#img1 a img { 
background-position: -32px -6px;
}
 
#img2 a img{
background-position: -32px -37px;
}
 
.....
</style>
 
<p id="img1"><a href="#"><img src="./pixel.gif" alt="" onmouseover="this.style.backgroundPosition = '0 -6px'" onmouseout="this.style.backgroundPosition = '-32px -6px'"/></a></p>
<p id="img2"><a href="#"><img src="./pixel.gif" alt="" onmouseover="this.style.backgroundPosition = '0 -37px'"  onmouseout="this.style.backgroundPosition = '-32px -37px'" /></a></p>
 

Suerte

[RabidFish]

Muchas gracias por sus respuestas, son de gran ayuda.
Saludos.