Saber que indice es X imagen.

chcma · #1 (**permalink**) 25/03/2008, 02:12

Buenos días !!!

Verán, supongamos que tengo 5 imágenes que se llaman igual en la página y que no puedo cambiar el nombre de ellas.

Y lo que quiero es que cuando pinche en una o en otra, sepa que indice de ENTRE ELLAS he pinchado.

Es decir, si por orden, he pinchado la primera, la segunda, ... o la quinta imagen de la página. ¿Saben como podría hacerlo?

Les pongo un ejemplo:

Código:

<table>
  <tr>
      <td><img id='imgdesplegable' src='...' alt='...' onclick='miFuncion()' /></td>
      <td>mas codigo</td>
      <td>mas codigo</td>
  </tr>
  <tr>
      <td><img id='imgdesplegable' src='...' alt='...' onclick='miFuncion()' /></td>
      <td>mas codigo</td>
      <td>mas codigo</td>
  </tr>
  <tr>
      <td><img id='imgdesplegable' src='...' alt='...' onclick='miFuncion()' /></td>
      <td>mas codigo</td>
      <td>mas codigo</td>
  </tr>
  <tr>
      <td><img id='imgdesplegable' src='...' alt='...' onclick='miFuncion()' /></td>
      <td>mas codigo</td>
      <td>mas codigo</td>
  </tr>
</table>

<script>
function miFuncion()
{
      alert(' has pinchado en la imagen: ' );
}
</script>

El problema está en que genero todo dinámicamente y que no puedo darles nombres diferentes a las imagenes, ni puedo poner en la llamada a la función un identificado: miFuncion('imagen1'); miFuncion('imagen2'); por lo que en la propia funcion debería averiguar que imagen ha sido la que ha llamado a la función.

Me imagino que si podría poner miFuncion(this) y asi ya capturar el objeto imagen (no lo probé, aun que creo que si funcionaria) pero aparte de capturar el objeto imagen, necesito saber si es el primero, el segundo... del documento.

Por favor, si alguien puede ayudarme, se lo agradeceré.

Saludos.

caricatos · #2 (**permalink**) 25/03/2008, 02:22

Hola:

Los id's no pueden repetirse, así que de todos modos tienes que cambiar la forma de generar esas imágenes, pero si quieres, puedes obtener el array de tags "img" dependientes de la tabla (te recomiendo que si vas a usar más tablas le pongas un id para referenciar... y en la función de esas imágenes ponerle como parámetro this para su refernciación:

function miFuncion(cual) {
imagenes = document.getElementsByTagName("table")[0].getElementsByTagName("img");
for (i = 0, total = imagenes.length; i < total; i ++)
if (imagenes[i] == cual) alert("se pincho soble la imagen " + (i + 1));
}

Saludos

aloqui · #3 (**permalink**) 25/03/2008, 02:29

En principio en lugar de id="imgdesplegable", deberías usar class="imgdesplegable" si lo estás usando para CSS, ya que el atrituto id debe ser único y no repetirse. Es mejor no usarlo, que ponerlo repetido.

En cuanto a tu pregunta, no lo he probado pero quizá te funcione con un handler que ponga las funciones a llamar en cuanto la página esté cargada, en cuyo momento ya se sabe cuantas imágenes tienes.

Código:

<body onload="addHandlers()">
...

  function addHandlers()
  {
    var img = document.getElementsByTagName("img");
    for (i=0; i<img.length; i++)
    {
      if (img[i].id == 'imgdesplegable')
      {
        img[i].onclick = miFuncion(i);
      }
    }
  }

...

Puedes adaptar la funcion "addHandlers" para que busque solo las imagenes dentro de la tabla, para las imágenes con un "class" determinado, etc.