Si entiendo lo que necesitas, creo que has planteado mal la lógica de la función, cambia los valores de imágenes y prueba la siguiente función:
Código HTML:
<html>
<head>
<script type="text/javascript">
var anterior = new Array();
var anteriorsrc = new Array();
function cambiarValores(ele,serie) {
if(typeof anteriorsrc[serie] != "undefined") {
anterior[serie].src = anteriorsrc[serie];
}
anterior[serie] = ele;
anteriorsrc[serie] = ele.src;
ele.src = "images/flecha_azul.gif";
}
</script>
</head>
<body>
<table>
<tr>
<td>
<img src="images/flecha_hover.png" name="c1" alt="1" onClick="cambiarValores(this,1)" />
</td>
<td>
<img src="images/errorIcon.gif" name="c2" alt="2" onClick="cambiarValores(this,1)" />
</td>
</tr>
<tr>
<td>
<img src="images/flecha_hover.png" name="c1" alt="1" onClick="cambiarValores(this,2)" />
</td>
<td>
<img src="images/errorIcon.gif" name="c2" alt="2" onClick="cambiarValores(this,2)" />
</td>
</tr>
</table>
</body>
</html> El código anterior crea dos lineas de imágenes dentro de la tabla, como comentas:
1 2
1 2
si pulsas el 2 de la primera linea se carga una nueva imagen:
1 3
1 2
y si pulsas el 1, el 2 vuelve a la normalidad y ahora la nueva imagen se colocara en 1:
3 2
1 2
Lo mismo sucede en la segunda linea, por lo menos eso fue lo que entendi que necesitas. Como te ha comentado IsaBelM y mi persona, el error que presentas se debe a que bebidas[i] CONTIENE UN VALOR (no esta vació) que lo tratas de asignar como si fuera el name de un elemento, pero resulta que ningún elemento tiene este name. SALUDOS.