Cambiar src de imagen onclick

[Tecktonikrazy]

Tengo este codigo:

Código HTML:

<img id="photo" src="imagen.jpg">

<input id="photoSelector" value="Escribe una URL">

<input type="button" value="Cambiar" onclick="change()"> 

Como hago para que al dar click en el boton, cambie el src de la imagen "photo" por el value de "photoSelector" que se supone que es una url?

[GastonManatico]

Iniciado por Tecktonikrazy

Tengo este codigo:

Código HTML:

<img id="photo" src="imagen.jpg">

<input id="photoSelector" value="Escribe una URL">

<input type="button" value="Cambiar" onclick="change()"> 

Como hago para que al dar click en el boton, cambie el src de la imagen "photo" por el value de "photoSelector" que se supone que es una url?

que es lo que deseas hacer.. no entiendo lo q queres hacer..

para que se usaria ??

[Tecktonikrazy]

Al dar click en el boton, la imagen deve de cambiar, por ejemplo, al principio la imagen es "imagen.jpg" pero luego yo escribo "http://sitio.com/foto.jpg" en el input llamado "photoSelector" y al dar click en el boton, la imagen deve cambiar de "imagen.jpg" a "http://sitio.com/foto.jpg"

[GastonManatico]

Iniciado por Tecktonikrazy

Al dar click en el boton, la imagen deve de cambiar, por ejemplo, al principio la imagen es "imagen.jpg" pero luego yo escribo "http://sitio.com/foto.jpg" en el input llamado "photoSelector" y al dar click en el boton, la imagen deve cambiar de "imagen.jpg" a "http://sitio.com/foto.jpg"

no es mejor escribir solamente el nombre de la foto ??.. o sea antes de escribir "http://sitio.com/foto.jpg" , poner solo el nombre.

[Tecktonikrazy]

como? no te entiendo, o sea en el textbox tu escribes la url de la imagen que tu quieras, das click en el boton, y la imagen cambia, pero por cual imagen va a cambiar? pues por la de la url que pusiste, o sea que deve ser la url de una imagen.

[GastonManatico]

Iniciado por Tecktonikrazy

como? no te entiendo, o sea en el textbox tu escribes la url de la imagen que tu quieras, das click en el boton, y la imagen cambia, pero por cual imagen va a cambiar? pues por la de la url que pusiste, o sea que deve ser la url de una imagen.

no es necesario, se puede hacer que ingreses el nombre de la imagen y te redireccione a la fotografia, sin necesidad de escribir toda la url.. .

vos queres hacer una galeria de fotos??

[Tecktonikrazy]

no, no entiendo a que te riefieres con el nombre de la imagen, a esto? <img src="imagen.jpg" name="imagen"> pero no tiene nada que ver, no estoy haciendo una galeria, solo quiero eso, una imagen, un textbox, un boton. al dar click en el boton cambia el src de la imagen por la url que pusiste, encerio es muy dificil de hacer? o no me entiendes aun?

[GastonManatico]

Iniciado por Tecktonikrazy

no, no entiendo a que te riefieres con el nombre de la imagen, a esto? <img src="imagen.jpg" name="imagen"> pero no tiene nada que ver, no estoy haciendo una galeria, solo quiero eso, una imagen, un textbox, un boton. al dar click en el boton cambia el src de la imagen por la url que pusiste, encerio es muy dificil de hacer? o no me entiendes aun?

me parece q no te entiendo, para entenderte, decime para que seria esto, donde se aplicaria el codigo.. o sea , para que quers hacerlo?

cuandao digo el nombre de la imagen me referia a supongamos , http://sitio.com/foto.jpg" lo de rojo seria el nombre

[zerokilled]

Iniciado por GastonManatico

no es necesario, se puede hacer que ingreses el nombre de la imagen y te redireccione a la fotografia, sin necesidad de escribir toda la url.. .

vos queres hacer una galeria de fotos??

hombre, eso es irrelevante. en el textbox se puede escribir solo el nombre del archivo. el navegador se encargara de analizar la URL de acuerdo a su valor. si no se indica una ruta absoluta, el navegador buscara la imagen en base a la ruta relativa. si se escribe solo el nombre, se entiende que la imagen reside en el mismo directorio del documento. si se escribe la URL completa, el navegador buscara de acuerdo a esa ruta. los siguientes valores son validos para el textbox.

Código:

imagen.jpg
/imagenes/imagen.jpg
../imagen.jpg
http://www.servidor.com/imagenes/imagen.jpg

[Tecktonikrazy]

Esacto, la imagen no necesariamente tiene que estar alojada en mi sitio, puede ser cualquier imagen que el usuario desee, pero ya me desespere! diganme como se hace!! yo intente esto pero no me funciono, tampoco se mucho de javascript:

Código HTML:

<img id="photo" src="imagen.jpg">
 
<input id="photoSelector" value="Escribe una URL">
 
<input type="button" value="Cambiar" onclick="change()">
 
<script language="javascript">
function change() {
 
var photoUrl = document.getElementById('photoSelector').value;
 
document.getElementById('photo').src = photoUrl;
}
</script>
 

Alguna otra idea?

[zerokilled]

fijate que el nombre de la funcion no es el mismo el que estas invocando en el evento onclick.

[Tecktonikrazy]

Si, pero ese solo lo puse de ejemplo, en mi pagina revise cientos de veces la ortografia pero no funciono de ese modo

[zerokilled]

no lo estas entiendiendo, el nombre de la funcion que tienes que invocar debe ser igual al nombre asignado a la funcion.

[Tecktonikrazy]

Iniciado por zerokilled

no lo estas entiendiendo, el nombre de la funcion que tienes que invocar debe ser igual al nombre asignado a la funcion.

Si si lo entendi te refieres a que en en el boton puse onclick="change()" y en la funcion function cambiar() pero eso no importa, en mi pagina revise la otrografia y todo estaba perfecto, aqui en foros fue donde me equivoque, en la pagina si puse bien el mismo nombre al evento y a la funcion, pero no funciona, necesito saber si hay alguna otra manera de hacerlo

[GastonManatico]

Iniciado por Tecktonikrazy

Si si lo entendi te refieres a que en en el boton puse onclick="change()" y en la funcion function cambiar() pero eso no importa, en mi pagina revise la otrografia y todo estaba perfecto, aqui en foros fue donde me equivoque, en la pagina si puse bien el mismo nombre al evento y a la funcion, pero no funciona, necesito saber si hay alguna otra manera de hacerlo

no logro entender , me gustaria saber que estas haciendo, o sea para q seriviria esto q queres hacer.

[Adler]

Hola

Cuando dices que no funciona ¿te levanta algún error? o ¿simplemente no se cambia la imagen?
Vamos a probar algo más básico, mantén el código tal y como está pero escribe la url de la imagen en la función

document.getElementById('photo').src = 'otraimagen';

Suerte

[Tecktonikrazy]

No, simplemente no cambia la imagen. Pero si escribo la url en la funcion, entonces al escribir otra url en el textbox simplemente no serviria de nada, para eso es:


var photoUrl = document.getElementById('photoSelector').value;

document.getElementById('photo').src = photoUrl;

[Adler]

Hola

No has entendido nada. El objeto de hacer lo que mencionaba es para que, en caso que no marcara error, vieras que la función no es el problema. Ahora bien, ¿donde está el error? Pues seguramente en la url que estás ingresando

Suerte

[Tecktonikrazy]

Aaaaaaaaaaa ya entendi, pero tambien lo intente y nada, alguna otra manera?