obtener array de imagenes por su id

[gachon]

Estoy intentando hacer un slide con javascript, lo he hecho sabiendo el nombre de las imagenes, pero ahora quiero sacar el array de nombre de la imagen por su id, lo encontrado por el name="iamgen", pero lo quiero obtener por su id, para luego tratarlo e intentar hacer el slide de javascript
es posible hacer esto por su id no por el name
Muchas gracias y espero puedan ayudarme, saludos

[zerokilled]

buenas,

tendrias que conocer de antemano el id de las imagenes. o bien puedes asignarle IDs similares con un patron. por ejemplo, una palabra con un numero al final. luego con un bucle creas el array. otra forma, y dependiendo de la estructura del documento, puedes usar getElementsByTagName para obtener las imagenes a partir de un elemento ancestro.

[gachon]

Muchas gracias, pero despues de un rato probandolo no puedo resolverlo
te pongo lo que hago haber si asin puedes ayudarme

Código PHP:

<script language="javascript">
var contenedor = document.getElementById("galeria");
var imagenes=contenedor.getElementsByTagName("imagen");
var contar=document.imagenes.length;
 
alert(contar);
</script>
 

y otra forma masl logica es esta pero no se porque no me lo da

Código PHP:

var imagenes1=document.getElementById("imagen");
var contar=document.imagenes1.length;
 
alert(contar);
 

y las 5 imagenes que tengo estan con el id=imagen

[zerokilled]

para empezar, en un documento no puede haber mas de un elemento con el mismo ID. aunque el navegador no proteste, en javascript no vas a obtener los resultados deseados. getElementById devuelve un solo elemento y en el caso de haber multiples elementos con el mismo id, devolvera el primero que encuentre. por otro lado, getElementsByTagName requiere como parametro el nombre de un tag, no el valor de atributo name o id.

de los dos codigos, el segundo es el mas desfasado. en el primero, el problema esta en la linea 3 y 4.

Código:

var imagenes=contenedor.getElementsByTagName("imagen");
var contar=document.imagenes.length;

el problema de la linea #3 ya la señale. el problema de la linea #4 es que imagenes no es una propiedad de document, sino una variable. de modo que simplemente debes usar directamente la variable sin indicacion de objetos.

[gachon]

Muchas gracias por la repuesta he conseguido hacerlo.
Muchas gracias.

POr cierto he conseguido hacer el slide, pero no se, si lo hecho de la mejor manera podria poner el ejemplo aqui y darme unos consejos

[zerokilled]

POr cierto he conseguido hacer el slide, pero no se, si lo hecho de la mejor manera podria poner el ejemplo aqui y darme unos consejos

por supuesto. sin embargo, no te puedo prometer que sea yo quien te responda.

[gachon]

Muchas gracias, este es el slide html

Código PHP:

 <div id="galeria"> 
<a href="#" id="next" onClick="next();"></a> 
<a href="#" id="prev" onClick="prev();"></a> 
 
<? 
for ($i=1; $i<=6; $i++){ 
?> 
<center><img src="fotos/herramientas-<?=$i?>.jpg"  height="344" id="imagen"></center> 
<? 
} 
?> 
 
</div> 
 
</body>  

y este el archivo externo de javascript

Código PHP:

  // creamos una variable llamada indice que es la que va a recorrer el arreglo 
// la inicializamos en el numero 1 
var indice=1; 
// creamos el arreglo llamado arreglo 
var arreglo= new Array(); 
var res=""; 
// recorremos el arreglo para guardar el nombre de todas la graficas 
var contenedor = document.getElementById("galeria"); //llamamos a contenedor div galeria 
var imagenes=contenedor.getElementsByTagName("IMG");//llamamos al hijo tag img 
var imagenes2=document.getElementById("imagen").src;//images con id image 
var contar=imagenes.length;//contamos las imagenes 
var nombre1=imagenes[0].src;//mostramos la direccion 
imagenes[0].style.display="block"; 
    // alert(nombre1); 
var res= new Array();      
for (i=0;i<=contar;i++) 
{ 
    // i.tostring es un metodo que cambia el valor entero i a su correspondiente valor cadena 
res[i]=imagenes[i].src; 
 
alert(res[i]); 
//arreglo[i]=res; 
//alert(arreglo[i]); 
} 
// esta funcion se encarga de cargar una nueva imagen , primero incrementa a indice 
// y si indice llega a 5 lo devuelve al principio del arreglo 
function cambiarimg() 
{ 
 
 if(indice==contar ) 
 { 
 indice=0; 
 } 
 
 
 document.getElementById('imagen').src=res[indice];//le decimos el valor de src en la imagen con id imagen 
 
 
  indice++; 
} 
//ahora para pasar adelante las imagenes 
function next(){ 
//indice=indice+1; 
 indice++; 
 if(indice > contar-1)//si indice es menor que la cantidad de la array el indice es 0 
 { 
 indice=0; 
  
 } 
  
document.getElementById('imagen').src=res[indice];//le decimos el valor de src en la imagen con id imagen 
     
} 
//ahora para pasar atras las imagenes 
function prev(){ 
indice --; 
//indice -1; 
 //indice=indice-1; 
 if(indice < 0)//si indice es menor que 0 de la array el indice es 6 
 { 
 indice=contar-1; 
  
 } 
  
document.getElementById('imagen').src=res[indice];//le decimos el valor de src en la imagen con id imagen 
 
} 
// esta funcion es la invocada desde el cargado de la pagina en el evento 
// onload y se encarga de llamar a la funcion cambiarimg cada 2 
// segundos, se puede cambiar el parametro para rotar las imagenes 
// mas lento o mas rapido. 
function repetir() 
{ 
setInterval("cambiarimg()",5000); 
}  
   

Haber si veis cosas de novatos y y se puede mejorar, espero puedad mejorar este slide

[zerokilled]

la realidad es que hay tantas formas de hacer una misma tarea segun el esquema o tecnica de programacion que se quiera seguir. mejorarlo sin salirme de ese esquema a veces me resulta complicado. de momento, lo unico que puedo pensar es que hay varias lineas que se pueden eliminar aunque tampoco ofrece ningun mejoramiento en el rendimiento. por ejemplo, las siguientes lineas no tienen sentido o uso.

Código:

// mas adelante se reescribe con un array
var res=""; 

// la variable imagenes2 no es utilizada
var imagenes2=document.getElementById("imagen").src; 

// todas las imagenes tienen el mismo id, en tu caso el unico que lo requiere es el primero
// si fueras a validar el documento, obtendrias un error por ello
<center><img src="fotos/herramientas-<?=$i?>.jpg"  height="344" id="imagen"></center>

[gachon]

Gracias.
es que si no pongo el id=imagen no puede mostrar en ella la siguiente la imagen con .src
No lo entiendo