Completar barra de Carga con JS

Ulkanova · #1 (**permalink**) 15/07/2008, 09:32

Bien, buenas foreros.

Necesito de su ayuda para lo siguiente...

Lo que debo hacer es una barra de carga (una imagen de una barra que se va llenando a medida que ocurren ciertos eventos)
esta barar de carga, que ya la tengo hecha como imagen, debo hacer que se valla completando a medida que el usuario completa datos en un formulario html

entonces, lo que tengo es un formulario HTML, con input type"radio", y a medida que hace click a los radio botones se va completando la carga de esta barra. Cada vez que se hace click en un radio boton se va cargando una imagen diferente reemplazando a la anterior.
Ejemplo... el usuario ve una img del 0% (al principio) y cuando hace click en la opcion de un radio boton, esta llama a alguna funcion que hace que la imagen 0% cambie a la imagen de 25%. Me dijeron que cambiando la propiedad SRC de la img se puede hacer, pero es ahi donde mis conocimientos de JS se limitan.

Agradeceria si me dan un codigo

Saludos, Ulkanova

David · #2 (**permalink**) 15/07/2008, 09:39

Debes asignarle un nombre. Por ejemplo:

Código HTML:

<img src='original.jpg' name='imagen'>

Luego, le cambias la imagen así:

Código PHP:

  imagen.src = 'nueva.jpg'

Saludos

Ulkanova · #3 (**permalink**) 15/07/2008, 13:16

Bueno, gracias por la ayuda.

Me gustaria que me especifiques mas todo el codigo, en la parte de JS... o sea, como hago para que cuando se clickee el input type radio me cambie el SRC?... te agradeceria que me pases el codigo JS para el cambio de al menos una imagen.

Tengo esto...

Cita:

¿Que le pongo en el script?

Saludos

David · #4 (**permalink**) 15/07/2008, 13:23

Bueno, para empezar el script debe estar en el <head> y no en el <body>.
Segundo, debes asignar la función a tu input en el evento onclick:

Código PHP:

  <input type="radio" name="1" value="a" onclick="cambiar()" />

Luego, en el script:

Código PHP:

  function cambiar(){
imagen.src='otraimagen.jpg';
}

Con eso ya tienes las bases para hacer lo que necesitas.

Saludos

Ulkanova · #5 (**permalink**) 15/07/2008, 14:20

no entiendo aun entonces porque es el error.

Hice lo que me dijiste y sin embargo no funciona, no encontre error de sintaxis, pero igual. podrias revisarlo? el codigo es este.

Cita:

GRacias

David · #6 (**permalink**) 15/07/2008, 14:22

Al img debes ponerlo como name y no como id 'imagen'. Así:

Código PHP:

  <img name="imagen" src="http://img378.imageshack.us/img378/9558/17761007tp7.jpg" />

Además que no debes poner '=' después del nombre de la función.

Ulkanova · #7 (**permalink**) 15/07/2008, 14:32

lo habia puesto antes como NAME y no como ID, y como no me habia funcionado lo cambie...
Acabo de hacer lo que me dijiste, y sigue sin funcionar.

Te copio el codigo para que lo revises

Cita:

me habian dicho que otra forma era hacer una variable que contenga una imagen, y otra variable que tenga la otra imagen y asi... y luego llamarlas por funciones.
Pero no se como hacer para darle una imagen para que contenga una variable, solo se como asignarle valores numericos y strings.

EDITO

Ahi me funciono en el IE pero no en Firefox, porque sera?

Nota: si tengo activado JAVASCRIPT en el Firefox, debe ser por algunas cuestiones de seguridad, alguno sabe cual?

David · #8 (**permalink**) 15/07/2008, 14:39

Yo lo he probado en IE y en FireFox y funciona perfectamente. ¿Tienes certeza que no estás confundiendo la imagen y por eso piensas que no funciona?.

Ulkanova · #9 (**permalink**) 15/07/2008, 14:43

nop, no es eso.
Lo he probado con otras imagenes.
Pero no importa si en mi PC en el Firefox no funciona. Mientras a los usuarios le funcione. Muchas gracias David ;) me has sido de gran ayuda en esto.
A medida que avance en el curso de JavaScript que estoy haciendo seguro vere esto y me reire de como no pude resolver esto jaja.

Saludos, y si funciona ;)