Un método posible si tienes las imágenes con nombres relacionados (como parece que es con saco1.jpg y saco1.1.jpg, aunque para el saco 2 parece que hay un fallo porque son la misma imagen), podrías hacer algo que reemplazase en el src
sólo la cadena que necesitas.
Por ejemplo, si la imagen en estado normal es sacoX.jpg (donde X es un número) y cuando se pasa el ratón por encima es sacoX.1.jpg, entonces podrías hacer algo como esto:
$(document).ready(function(){
$("img").hover(cambiar, restaurar);
});
function cambiar(e){
$(this).attr("src", $(this).attr("src").replace(".jpg", ".1.jpg") );
}
function restaurar(e){
$(this).attr("src", $(this).attr("src").replace(".1.jpg", ".jpg") );
}
A todas las imágenes se les aplica la misma función de manera genérica.
Ahora, para esto realmente no hace falta JavaScript, podrías obtener un resultado similar si crearas un contenedor que tuviera las dos imágenes pero sólo se mostrara una en cada momento (usado el atributo display
). Por ejemplo, algo como esto:
div { width:200px; height:200px; }
div .activa { display:block; }
div .oculta { display:none; }
div:hover .activa { display:none; }
div:hover .oculta { display:block; }
<div>
<img class="activa" src="http://lorempixel.com/200/200/people" />
<img class="oculta" src="http://lorempixel.com/200/200/cats" />
</div>