Secuencias JS

abarrero90 · #1 (**permalink**) 28/02/2013, 17:02

Buenas noches, tengo una gran duda. Imaginaros que teneis un código js que ejecuta una petición de usuario y password. A partir del momento de la confirmación del usuario, ¿cómo puedo lanzar una imagen?. Debe ser todo en el mismo código.

Muchas gracias.

Saludos.

chwc · #2 (**permalink**) 28/02/2013, 17:35

Hola, la siguiente pregunta que formulas

Cita:

¿cómo puedo lanzar una imagen?. Debe ser todo en el mismo código.

por lo menos, yo no lo entiendo, cuando te refieres a lanzar una imagen, que significa ?
las posibilidades que pienso son: agregar una imagen a un elemento del DOM, cambiar el background a un elemento del DOM, obtener una imagen de la interfaz actual del usuario, obtener una imagen via webcam.

debes ser mas especifico :)

un saludo

abarrero90 · #3 (**permalink**) 01/03/2013, 09:32

Perdona es cierto, me he explicado bastante mal.

Mi código comienza con la ejecución de una peticion de usuario y contraseña. Cuando el usuario acccede correctamente, comienza la segunda ejecucion. Esta segunda ejecucion le muestra una secuencia de imagenes.

No se como hacer que mi DOM tenga por un lado la ejecución de la peticion de user+pass, y luego en el mismo codigo, mostrarle esa secuencia de imagenes.

Muchas gracias.

abarrero90 · #4 (**permalink**) 04/03/2013, 16:00

Buenas noches a todos. Estoy teniendo algunos problemas a la hora de modificar mi DOM. Necesito que tras ejecutar las instrucciones del primer div, haciendo uso de la función "document.createElement('img');" cambie el contenido de mi DOM por el de esta nueva etiqueta.

Dejo aquí el código por si alguien pudiese echarme un cable. Muchas gracias.

Código Javascript:

Ver originalvar imagen=document.createElement('img');
                        imagen.src = "corazon.jpg";
                        imagen.witdh = "256";
                        imagen.height = "256";
                   // var element=document.getElementById("img");
                   
                    document.getElementById("place").appendChild(imagen);

Código HTML:

Ver original<body>  
        <div id="Form">
            <P ALIGN=CENTER>
            <H1>Identificacion</H1>
            <FORM name="Datos" method="POST">
                User: <INPUT TYPE=TEXT NAME="USER"  SIZE=10><BR>
                Pass: <INPUT TYPE=PASSWORD NAME="PASS"  SIZE=8><BR>
                <button onclick="CheckUser()">Click me</button>
            </FORM>
         </div>
 
        <div id="place"> </div>
        
    </body

emprear · #5 (**permalink**) 04/03/2013, 16:55

tres variantes

Código HTML:

Ver original<!DOCTYPE html>
<html lang="es-ar">
<head>
<meta charset="utf-8" />
<title>Html5</title>
 <script>
function a(){
var imagen=document.createElement('img');
                   imagen.src = "images.jpg";
                   imagen.witdh = "50";
                   imagen.height = "50";
                   document.getElementById("img").appendChild(imagen);
   }
 
function usuario() {
var usu = document.getElementById("nombre");
if(usu.value == "emprear"){
a();
return false;
}else{
return false;
}
}
 
 
function usuario2() {
var usu = document.getElementById("nombre2");
if(usu.value == "emprear"){
var imagen2=new Image();
                   imagen2.src = "images.jpg";
                   imagen2.witdh = "100";
                   imagen2.height = "100";
                   document.getElementById("img2").appendChild(imagen2);
}
}
 
function usuario3() {
var usu = document.getElementById("nombre3");
if(usu.value == "emprear"){
document.getElementById("img3").innerHTML = "<img src='images.jpg' alt='' width='200' height='200' \/>";
}
}
 
</script>
</head>
<body>
    <p>
    nombre  válido = emprear<br />
 </p>
 <form action="#" onsubmit="return usuario();">
<input type="text" value="" id="nombre" />
<input type="submit" value="enviar" />
</form>
 
 <form action="#">
<input type="text" value="" id="nombre2" />
<input type="button" value="enviar" onclick="usuario2();" />
</form>
 
 <form action="#">
<input type="text" value="" id="nombre3" />
<input type="button" value="enviar" onclick="usuario3();" />
</form>
 
 
<div id="img"></div>
<div id="img2"></div>
<div id="img3"></div>
</body>
</html>

saludos

abarrero90 · #6 (**permalink**) 06/03/2013, 07:45

Ok al fin ya lo conseguí, aunque tuve que utilizar el comando removeChild para que me mostrara unicamente la imagen.

Ahora estoy "pegándome" con otro problema. Una vez resuelto el anterior ahora quiero insertar 4 imágenes en una tabla después de todo el proceso anterior.

He probado varias cosas:

Crear dos blucles for, el primero para las filas y el segundo para las columnas, pero mi problema aquí esta en cómo accedo al campo "id" para poder agregar mi imagen con appendChild

La otra opción que he intentado ha sido la de crear una tabla directamente en código html y después insertar las imágenes, pero entonces esta tabla se me muestra desde el principio de carga de la página.

¿Alguien podría orientarme un poco?

Muchas gracias, un saludo

emprear · #7 (**permalink**) 06/03/2013, 11:03

Cita:

Iniciado por abarrero90

Ok al fin ya lo conseguí, aunque tuve que utilizar el comando removeChild para que me mostrara unicamente la imagen.

no se entiende, que se supone que removés con removeChild? además de mostrar la la imágen que debería NO aparecer? viste los ejempos que te dejé?

Por lo otro, armá la tabla en el html y asignale display:none en el css, después la hacés visible cambiándole la propiedad con javascript

abarrero90 · #8 (**permalink**) 08/03/2013, 06:44

Perfecto macho, gracias a tu aporte de "display:none", es lo que necesitaba. Utilizando las propiedades de style de none,hiden, block estoy avanzando bastante.

No sabrás por algún casual si hay alguna función que me pueda servir para mostrar imágenes aleatoriamente, quiero decir:

Quiero mostrar 4 imagenes en una tabla, y en cada posición una imagen aleatoria.

Muchas gracias.

emprear · #9 (**permalink**) 08/03/2013, 07:30

Cita:

Iniciado por abarrero90

Perfecto macho, gracias a tu aporte de "display:none", es lo que necesitaba. Utilizando las propiedades de style de none,hiden, block estoy avanzando bastante.

No sabrás por algún casual si hay alguna función que me pueda servir para mostrar imágenes aleatoriamente, quiero decir:

Quiero mostrar 4 imagenes en una tabla, y en cada posición una imagen aleatoria.

Muchas gracias.

Leete estos temas
http://www.forosdelweb.com/f13/image...nicio-1016845/
http://www.forosdelweb.com/f13/aport...genes-1017074/

Alguna de esas seguro te servirá
Saludos

abarrero90 · #10 (**permalink**) 13/03/2013, 14:17

Muchas gracias emprear, ya he conseguido una función que desordena un array. Es la siguiente: src = src.sort(function() {return Math.random() - 0.5});

Ahora tengo el siguiente problema:
Cuando intento cambiar las imágenes que a continuación os pongo no me las cambia, lo he repasado por activa y por pasvia y todo tiene buena pinta. He abierto la consola del navegador para ver si daba algún error, y me escribe el directorio donde tengo mi .html.

¿Alguien sabe qué puede estar pasando?.

Dejo el código aquí abajo!. Muchas gracias.

Código HTML:

Ver originalvar derecha = document.getElementById(de).src;
                document.getElementById(de).src = document.getElementById('img12').src;
                document.getElementById('img12').src = derecha;