Hacer un onmouseover de una imagen algo diferente

Buenas chicos otra vez.

Estaba haciendo una web donde se aplica un hover, lo estoy haciendo de la siguiente manera

<a href="#"> <img src="images/A1.png" onmouseover="this.src='images/B1.png'" onmouseout="this.src='images/A1.png'"">

Acá me hace el efecto, entonces me surge la idea de esta situación: Si tengo 4 imagenes de la forma de arriba claro A2 con onmouseover B2, A3 con mouseover B3  y asi respectivamente; como le hago para que cuando haga el mouseover a la A1, las otras cambien sus imagenes a un C2,C3 y asi respectivamente?

Gracias,

Saludos a todos

Con CSS lo puedes lograr:

<a id="home"><img class="image_on" src="images/about.png" alt="logo" /><img class="image_off" src="images/aboutR.png" alt="logo" /></a>

.image_off, #home:hover .image_on{
   display:none
}
.image_on, #home:hover .image_off{
   display:block
}

Saludos.

Gracias,

Ese me lo hace para 1, encontré mas sencillo el mio jaja pero lo que quiero saber es como se podria hacer si al pasar el mouse sibre el A1 el cambia a B1 (eso ya lo tengo mas que claro) pero cuando estoy en b1 las otras imanes (A2,A3...) pase a tener imagen C1,C2 y asi respectivamente

Bueno, mi estimado, el tuyo es más complicado, te di la solución más sencilla que puedas encontrar, usando javascript deberás programar una función donde pasarle un parámetro y llamarlo desde el evento onmouseover.

No, tienes razón, las dos hacen practicamente lo mismo. Lo que no se es si puedo poner otra clase de css o una función para que cuando esté sobre los A1 la imagen del b1,c1,d1 puedan ponerse en imagenes b3,c3,d3 mientras que la imagen de A1 esta en A2.