Cambiar imagen segun su name y parametro

erxaca · #1 (**permalink**) 16/03/2011, 12:46

Hola compañeros, en una pagina tengo una serie de listas (identificadas por un parametro pasado a la funcion) de numeros por ejemplo hasta el dos. En estas listas aparece la imagen del uno y del 2 en cada una de ellas. Cuando selecciono un numero de una de esas listas, esa imagen cambia. Al volver a pinchar en otra imagen de esa lista la imagen anterior vuelve a su estado original y la nueva imagen pinchada (numero 2) cambia su imagen.

Bien, he conseguido que me cambie las imagenes correctamente cuando estas seleccionando de una misma lista o te vas a otra y pinchas una sola vez pero si pinchas de nuevo en la anterior lista no cambiara la antigua imagen. El codigo no esta preparado aun para eso pero es porque no se como hacerlo. Como podria identificar si algun numero de X lista esta clicado y guardar el numero ya seleccionado para posteriormente cambiarlo?

La cosa es que el numero de listas es dinamico.

Os dejo el código de lo que he estado haciendo hasta el momento, para un mismo name o parametro funciona perfectamente:

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" />

  <img src="images/boton-bebidas-1-off.png" name="n1" alt="1" onclick="cambiarValores(this,'Nesti')" />
  <input type="hidden" name="nesti-1" value="bebida" />

  <img src="images/boton-bebidas-2-off.png" name="f2" alt="2" onclick="cambiarValores(this,'Nesti')" />
  <input type="hidden" name="nesti-2" value="bebida" />

</body>
</html>

Gracias de antemano!

marcopoloaz06 · #2 (**permalink**) 16/03/2011, 13:31

Hola, ps no entidi mucho supongo que en la linea:

Código Javascript:

Ver originaloldimg.src = 'images/boton-bebidas-' + oldname + '-off.png';

oldname no es 1 ni 2 es f2 y f1, si no ps pasa las imagenes para entender mejor

Saludoss
:]

erxaca · #3 (**permalink**) 16/03/2011, 13:40

perdon ese code js esta mal, el correto es este:

Código HTML:

 <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-' + oldnum + '-off.png';
	  }
	  oldprod = prod;
	  oldnum = obj.alt
	  oldname = obj.name;
  //-->
  </script>

oldname guarda el parametro que se la pasa a la funcion, por ejemplo Coca-Cola, Fanta-Naranja, Nesti etc y las images se diferencian entre 1 y2 tomandolo de los alt. Todas son las mismas imagenes solo hay off u on.

Saludos ;)