bueno ya lo solucioné, usé nombres distintos, almaceno el name anterior y el alt que tiene el valor que se repite entre los elementos y listo. Dejo la solución por si le sirve a alguien, basicamente consiste en seleccionar una imagen que cambia al click y si se elije otra con el mismo parametro se desmarca la anterior y se cambia la nueva imagen:
Código HTML:
<html>
<head>
<script type="text/javascript">
<!--
var oldprod, oldname, oldnum;
function cambiarValores(obj,prod) {
var img = obj.src;
img = img.split('/').pop();
img = img == 'boton-bebidas-' + obj.alt + '-off.png' ? 'images/boton-bebidas-' + obj.alt + '-on.png' : 'images/boton-bebidas-' + obj.alt + '-off.png';
obj.src = img;
if(oldprod == prod) {
var oldimg = document.getElementsByName(oldname)[0];
oldimg.src = 'images/boton-bebidas-' + oldname + '-off.png';
}
oldprod = prod;
oldnum = obj.alt
oldname = obj.name;
//-->
</script>
</head>
<body>
<img src="images/boton-bebidas-1-off.png" name="c1" alt="1" onclick="cambiarValores(this,'Coca-Cola')" />
<input type="hidden" name="coca-cola-1" value="bebida" />
<img src="images/boton-bebidas-2-off.png" name="c2" alt="2" onclick="cambiarValores(this,'Coca-Cola')" />
<input type="hidden" name="coca-cola-2" value="bebida" />
<img src="images/boton-bebidas-1-off.png" name="f1" alt="1" onclick="cambiarValores(this,'Fanta-Naranja')" />
<input type="hidden" name="fanta-naranja-1" value="bebida" />
<img src="images/boton-bebidas-2-off.png" name="f2" alt="2" onclick="cambiarValores(this,'Fanta-Naranja')" />
<input type="hidden" name="fanta-naranja-2" value="bebida" />
</body>
</html>