Ir para conteúdo

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

mzaidan

Carregar valor do input no src de uma imagem

Por , em Javascript

Recommended Posts

mzaidan    2

mzaidan
Postado

Prezados, esse eu tentei bastante antes de postar, mas não consegui:

 

<img src="" alt="Title #16" />

 

Eu gostaria de inserir um valor de um input nessa imagem, para que ela abrisse o que tem no input.

 

Tem como?

 

Grato.

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

mzaidan    2

mzaidan
Postado

Cara, entrei nesse link ai, mas não entendi o que ele faz.

O que eu queria é o seguinte:

Colocar o valor de um input no src de uma imagem

Tem como?

O valor desse input está sendo gerado no onclick de outra imagem.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

Então meu. Nesse link o código faz justamente o que você precisa.

Não coloquei os eventos por entender que você já havia feito isso.

Veja bem:

<img src="" alt="imagem" id='foto'>
<input type='text' id='caminho' value='http://forum.imasters.com.br/public/style_images/imasters-2014/logo.png'>

var foto = document.getElementById('foto');
var caminho = document.getElementById('caminho')
var origem = foto.setAttribute('src', caminho.value)

O javascript identifica os 2 elementos via getElementById e depois atribui o valor do input ao src da imagem.

Você só precisa criar o evento onchage do input.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mzaidan    2

mzaidan
Postado

Cara, desculpa a minha burrice, mas não entendi.

 

Meu código ta assim:

 

Imagem:

<a class="thumb" name="leaf" href="imagens/thumbImagem1.jpg" title="Title #0"> <img name="imagem1.jpg" src="imagens/imagem1.jpg" alt="Title #0" onClick="nomeImagem(this)">

 

Javascript:

 

<script>
function nomeImagem(img){
var nomeImagem = img.name;
document.getElementById('campo').value = nomeImagem;
}
</script>
Input:
<input type="text" id="campo" value="teste"></input>
Toda vez que eu clico em uma imagem, o valor do input muda, tudo certo.
Só que, além disso, eu queria armazenar esse valor do input em algum lugar.
Pensei em uma session do PHP, só que estou tendo dificuldade de jogar esse valor do input dentro de outra tag img.
<img src="AQUI" alt="Title #16" />
</a>

 

Eu teria que jogar esse valor do input nesse campo ai (SRC)

 

Entendeu?

 

Desde já agradeço a boa intenção.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

Então, @mzaidan.

O código que eu passei no link faz isso, você só precisa linkar ele ao evento onchange do input.

Dá uma olhada no link de novo (http://codepen.io/marlonlp/pen/IopCG), alterei e coloquei o evento no input.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mzaidan    2

mzaidan
Postado

Cara, eu acho que eu sou burrico, pois não entendi aqui.

Na moral mesmo, me desculpe, mas não entendi e não consegui botar pra funcionar.

 

Eu fiz isso:

<script>

function mudaImagem(campo) {
var foto = document.getElementById('foto');
var origem = foto.setAttribute('src', campo)
}
</script>
<body>
<input type="text" id="campo" value="" onchange="mudaImagem(this.value);"></input>
<img id='foto' src="" alt="Title #14">
</body>
Não aconteceu absolutamente nada.
Nesse seu exemplo, a imagem:
Não abriu, só apareceu o link dela
O que eu estou precisando é que uma imagem seja aberta, contendo o que existe em um input.
Desculpe a burrice, mas além de não entender seu código, copiei, joguei e não deu certo :(

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

Vamos lá.

Primeiro, a tag input não tem tag de fechamento. Remove esse </input> do final.

 

O evento onchange é disparado quando você tira o foco do input.

 

Vai no link que eu te passei e cola a url abaixo dentro do input text e pressiona tab:

 

http://www.gravatar.com/avatar/0831af5ce77f33ceb483855aa9d7cda2?s=100&d=http%3A%2F%2Fforum.imasters.com.br%2Fpublic%2Fstyle_images%2Fimasters-2014%2Fprofile%2Fdefault_large.png.

 

A imagem vai mudar para a foto do meu perfil.

Acabei de fazer e está funcionando normalmente.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mzaidan    2

mzaidan
Postado

AHHHHHHHHHHHHH

Agora entendi.

Tava esperando mudar automaticamente.

Teste aqui e deu certo.

So que, ao invés de onchange, eu queria que ele mudasse no Onclick de outra imagem, tem como?

 

Tipo, eu vou apertando nas imagens e, de acordo com cada imagem, esse valor do input vai mudando

 

Valeu, mestre.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

Você pode utilizar o conteúdo da função que eu passei dentro da tua função nomeImagem().

Você nem precisaria do input text.

function nomeImagem(img){
var nomeImagem = img.name;
document.getElementById('campo').value = nomeImagem;
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

mzaidan    2

mzaidan
Postado

Tentei o seguinte:
Assim que clica na imagem, dispara essa função:

 

function nomeImagem(img){
var nomeImagem = img.name;
document.getElementById('campo').value = nomeImagem;
var foto = document.getElementById('foto');
var origem = foto.setAttribute('src', campo)
}
O que está em negrito foi o que vc me passou.
O meu input "campo" é o seguinte:
<input type="text" id="campo" value="">
Assim que eu clico na imagem, o value do input "campo" é alterado para o que eu preciso.
So que, a imagem não está sendo carregada.
O link da imagem fica:
[object%20HTMLInputElement]
Qual o erro?
Desde já agradeço.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mzaidan    2

mzaidan
Postado
<script>


function nomeImagem(img){

var nomeImagem = img.getAttribute('src');

document.getElementById('campo').value = nomeImagem;

var foto = document.getElementById('foto');

var origem = foto.setAttribute('src', campo)

}

</script>


<input type="text" id="campo" value="">


<img id="foto" src="" alt="Title #14" />


Assim não deu.

Ainda retornando o [object%20HTMLInputElement]


:(

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado 

function nomeImagem(img){
  var nomeImagem = img.getAttribute('src');
  var foto = document.getElementById('foto');
  var origem = foto.setAttribute('src', nomeImagem);
}

Posta o HTML pra ficar mais fácil de testar.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mzaidan    2

mzaidan
Postado

Caso eu quisesse mudar um src de uma imagem para o href, como seria?

 

Tentei assim, mas não deu:

<a class="thumb" id="foto" href="" title="Title #14">
<img src="imagens/thumbimagem1.jpg" alt="Title #14" /></a>

E alterei a função para:

function nomeImagem(img){
  var nomeImagem = img.getAttribute('href');
  var foto = document.getElementById('foto');
  var origem = foto.setAttribute('href', nomeImagem);
}

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

Então. Você vai usar getAttribute no elemento de origem e setAttribute no elemento de destino.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Marlon Pacheco    132

Marlon Pacheco
Postado

Você está confundindo as coisas. Tags img não possuem href.

No seu código você 'tentou' pegar o href de uma imagem para colocar em um link. Mas, como disse antes, img não tem href.

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.

  Aceito