vectores con imagenes y evento onclick

[Atemu]

buenas tardes, mi problema es el siguiente, esk tengo una base de datos con id , numero_imagen, nombre, lo k quiero es guardar toda esa informacion en un array y compararla con unas las img k tengo en un directorio, especifico, por ejemplo, numero_imagen, concuerde con el nombre de la imagen que tengo en el escritorio, y k ademas de eso con el evento on_click (estuve leyendo y creo k es con java), de click en una img o lugar especifico y me coloque la img en un lugar determinado, puede ser dentro de una tabla, he estado buscando toda la tarde la manera, pero no he podido encontrar la solucion, espero k me puedan ayudar, les agradezco de antemano 

[engel lex]

explícate más detallado... y separa tus ideas... y aclara

"es que"
"que"

tengo una base de datos con id , numero_imagen, nombre

guardar toda esa informacion en un array y compararla con unas las img k tengo en un directorio, especifico, por ejemplo, numero_imagen, concuerde con el nombre de la imagen que tengo en el escritorio

1- no puedes tocar el escritorio del usuario... el navegador solo te permite mostrar...

demas de eso con el evento on_click (estuve leyendo y creo k es con java), de click en una img o lugar especifico y me coloque la img en un lugar determinado, puede ser dentro de una tabla

1- no es java, es javascript (aunque se llamen similares si similitud llega solo al nombre)
2- un evento "escucha" lo que hace el usuario sobre la pagina, no realiza accioens
3- no tiene sentido :s

que tal si te lees algún tutorial de javascript primero, aclaras lo que quieres hacer (o por lo menos los terminos) y reintentas formularme tu idea?

[Atemu]

explícate más detallado... y separa tus ideas... y aclara

"es que"
"que"1- no puedes tocar el escritorio del usuario... el navegador solo te permite mostrar...
1- no es java, es javascript (aunque se llamen similares si similitud llega solo al nombre)
2- un evento "escucha" lo que hace el usuario sobre la pagina, no realiza accioens
3- no tiene sentido :s

que tal si te lees algún tutorial de javascript primero, aclaras lo que quieres hacer (o por lo menos los terminos) y reintentas formularme tu idea?

sorry si no me hize entender, mi problema es el siguiente y lo colocare por separado lo que quiero hacer.

1-por ejemplo tengo un vector imagenes, quiero k en ese veector guarde todas las propiedades o elementos o datos como kieran llamarlo desde la base de datos, por ejemplo, tengo una base de datos de la siguiente manera:

id (auto) Numero_imagen Nombre
1                   52              Flores
2                   45              Colores

2-despues de eso, se hara una funcion la cual obtenga la img correspondiente para cada dato del vector, me explico:

quiero k el nombre flores, me concuerde con una img que tengo en la carpeta donde estoy haciendo el proyecto, osea, si el nombre es flores, me cargara la img con el nombre flores.jpg, para k asi se pueda ver la img, tengo entendido k tengo k crear un objeto imagen, darle propiedades y todo eso, pero no estoy muy seguro como se hace, he estado investigando y me parece un poco complejo jeje

3- luego de hacer eso lo que quiero hacer es que cuando yo haga click en una imagen me cargue la funcion, estuve leyendo y en la imagen se colocar Onclik="", pero no estoy muy seguro, si es verdad o exactamente se utiliza, y la imagen que deseo traer, por ejemplo flores, me salga en un lugar determinado, puede ser en una tabla obviamente dandole cordeenadas especificas para que quede en la posicion deseada.

espero que me hayan entendido, que pena el comentario anterior, he estado lyendo los tutos que han colocado en el foro, he aprendido cada vez mas , pero no encuentro solucion a esto, espero que me puedan solucionar mi problema, muchas gracias

[engel lex]

mejor XD

2-despues de eso, se hara una funcion la cual obtenga la img correspondiente para cada dato del vector

para esto, si sabes que lo que está en la db es la realidad (es decir no faltan imágenes) simplemente al vector en cada espacio le agregar su extensión por ejemplo ".jpg"

puedes hacerlo así

Código (php) [Seleccionar] Expandir


for($i=0;$i<count($vector);$i++){
  vector[$i].=".jpg";//.= da un equivalente corto a  vector[$i]=vector[$i].".jpg"
}


no tienes que crear objetos... objetos es cuando vayas a hacer algo relamente complejo...

3- luego de hacer eso lo que quiero hacer es que cuando yo haga click en una imagen me cargue la funcion, estuve leyendo y en la imagen se colocar Onclik=""

efectivamente onclick, aunque si te sientas a estudiar un poco con JQuery todo lo siguiente es más facil... pero seguiré con jscript
http://www.w3schools.com/jsref/event_onclick.asp
ahí (en inglés) como se usa y como

y la imagen que deseo traer, por ejemplo flores, me salga en un lugar determinado

asumiré que ese "boton" (so que se que uses para llamarlo) solo te traerá "flores"
lo que haces (para que sea simple es)
1- el html llevará una img que contenga una imagen transparente o de 1px... le colocaremos un id="cargador_imagen" que es donde aparecerá tu imagen
2- el "boton" tendrá entre las propiedades

Código [Seleccionar] Expandir

onclick="cambiar_imagen('flores')"
3- con jscript (asumiendo que flores está en la carpeta principal) creas la funcion "cambiar_imagen(imagen)" y entre todo el codigo que necesitas es

Código [Seleccionar] Expandir

document.getElementById('cargador_imagen').src="/"+imagen+".jpg";


con eso deberías poder hacerlo... dime si no entendiste algo

[Atemu]

exelente muchisimas gracias, enserio te agradezco muchisisisismo , pero con respecto a lo ultimo, no siempre traere flores, por ejemplo:

en la imagen k dare click, cuando de click, me aparecera la 1 informacion del vector que el el caso de la tabla que coloque ahi sera flores, y luego cuando vuelva a dar click, seguira con la siente k sera colores y asi indefinidamente hasta k se acabe el vector obviamente, espero haberme hecho entender

aunque con respecto a esto

Código [Seleccionar] Expandir


vector[$i].=".jpg";//.= da un equivalente corto a  vector[$i]=vector[$i].".jpg"

el ".jpg", lo puedo cambiar por la ruta donde se encuentra la img no?, ya que como he dicho antes no siempre tomara el valor de flores, si no diferentes img dependiendo del nombre claro esta

engelx, muchas gracias por todo, probare mañana lo k me colocaste, pork es tarde en mi pais jeje, pero viendo como lo colocaste parece ser k si es perfecto lo que necesito

[engel lex]

si... incluso en el php, haces un array para guardarlo como sea que la necesites... supongamos que te queda

Código [Seleccionar] Expandir


$array_php= array(
carro.pgn,
flores.jpg
avion.gif
)


el php tiene una funcion que es
"json_encode"
y la usarias

Código [Seleccionar] Expandir


$array_javascript=json_encode($array_php);


ese array ahí guardado lo imprimes dentro del jscript (con echo, ya que es una cadeja de caracteres) y "json" es un tipo de array perfectamente usable y legible por jscript

entonces accederias por ejemplo(suponiendo que tu array se llama "imagenes")

Código [Seleccionar] Expandir



document.getElementById('cargador_imagen').src="/"+imagenes[j];


donde "j" es el numero de la imagen que quieres acceder

[Atemu]

hola engelx, gracias de nuevo por tu pronta respuesta, mira te coloco el codigo pork sigue sin salirme

Código [Seleccionar] Expandir

   <?php



 //obtener imagenes de un directorio - function glob convierte las imagenes en vectores de imagenes
$picture=array(glob("./imagenes/*.jpg"));
//shuffle el vector de imagenes
//$imashu = shuffle ($picture);
//echo '<img src="'.implode('"><br><img src="',$picture).'">';

$consulta = mysql_query("SELECT * FROM imagenes") or die ("problemas en consulta;".mysql_error());

while($con=mysql_fetch_array($consulta)){

$imagen = array();

      $imagen['idimagen'] = $con['IdImagen'];
  $imagen['num_imagen'] = $con['NumeroImagen'];
  $imagen['nom_imagen'] = $con['NombreImagen'];
     
  
  for ($i=0;$i<count($imagenes);$i++){
  $imagenes[$i].=".jpg";   
  
  }
}

?>

<script >
function cambiar_imagen()
{
document.getElementById('cargador_imagen').src="$picture";
}
</script>

como te decia, creo un vector k me tome los datos de la base de datos, luego lo que busco esk cada vez k de click en la imagen o boton me traiga el primer dato del vector a un lugar especifico, como tu dices una img transparente, no se que ando haciendo mal, espero k me puedas ayudar jeje, soy algo nuevo en esto, muchas gracias de antemano

por  cierto, si me puedes dejar una explicacion con el jquery haber si se me facilita todo, y de paso aprender mucho mas

[engel lex]

resumamos tu codigo sin los comentarios

Código (php) [Seleccionar] Expandir

<?php
$picture=array(glob("./imagenes/*.jpg"));
echo '<img src="'.implode('"><br><img src="',$picture).'">'; // no debe ser comentado
$consulta = mysql_query("SELECT * FROM imagenes") or die ("problemas en consulta;".mysql_error());
while($con=mysql_fetch_array($consulta)){
    $imagen = array();
    $imagen['idimagen'] = $con['IdImagen'];
    $imagen['num_imagen'] = $con['NumeroImagen'];
    $imagen['nom_imagen'] = $con['NombreImagen'];
     
    for ($i=0;$i<count($imagenes);$i++){
        $imagenes[$i].=".jpg";   
    }
}
?>


primero vamos con los errores del codigo...

Código [Seleccionar] Expandir

$picture=array(glob("./imagenes/*.jpg"));
"glob" devuelve un array... estás creado un array cuyo primer elemento es otro array creado por glob... así que resumelo a

Código [Seleccionar] Expandir

$picture=glob("./imagenes/*.jpg");

Código [Seleccionar] Expandir

$imagen = array();
$imagen['idimagen'] = $con['IdImagen'];
$imagen['num_imagen'] = $con['NumeroImagen'];
$imagen['nom_imagen'] = $con['NombreImagen'];

no hizo nada este codigo... creaste el array y ahí se quedó...

Código [Seleccionar] Expandir

for ($i=0;$i<count($imagenes);$i++){
$imagenes[$i].=".jpg";  
}

otra parte que no hace nada realmente XD

Código [Seleccionar] Expandir

document.getElementById('cargador_imagen').src="$picture";

no mezclas las variables de php y javascript  a la ligera... el php solo correrá antes de enviar todo al navegador, una vez enviado el ya se detuvo...

hagamos algo... has una imagen de que quieres obtener, porque el código no dice mucho... no entendí realmente que quisiste hacer porque tiene muchos huecos

[Atemu]

okey que pena la molestia, como dije antes soy un poco nuevo en esto jeje, mira la img es la siguiente



quiere decir, cada vez k haga click se insertara una img del vector el cual cree, y para insertar la img, me imagino k se tendra k igualar el nombre como esta en la base de datos, con el nombre de la img k esta en la carpeta de mi proyecto para asi llamarla y poderla colocar en la posicion correspondiente, jeje

PD: se me acabo de ocurrir otro plus para tratar de hacer eso, pero hasta k no termine esto no lo intentare jeje

engelx, muchas gracias de nuevo, seguire intentadolo y averiguando mientras respondes jajaj 

[engel lex]

ok, ya voy entendiendo... la cosa está en que guardes todo en un array de jscript con el metodo que te dije...

en nivel basico (sin tocar la db, ya tu lo harás)

Código (php) [Seleccionar] Expandir


<?php
$picture=glob("./imagenes/*.jpg");
$json = json_encode($picture);
echo (
<script>
var imagenes = $json;
</script>;
?>


para cuando cargue el resto de la pagina tendrás un array en jscript que puedes usar normalmente

algo como

Código (javascript) [Seleccionar] Expandir


var contador = 0;

document.getElementById('cargador_imagen').src=imagenes[contador++];


antes de avanzar, te recomiendo leerte estos 2 tutoriales de jscript y jquery para que entiendas más o menos que puedes hacer y como

jscript http://www.javascriptya.com.ar/
jquery http://www.javascriptya.com.ar/jquery/

tambien si tienes tiempo has estos
html http://www.htmlya.com.ar/
php http://www.phpya.com.ar/
css http://www.cssya.com.ar/

esos tutos son simples faciles y cortos... y cubren todo lo basico para lo que necesitas