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

Recommended Posts

Cara, o que exatamente você precisa fazer?

Estou ajudando até agora, mas não entendi qual o sentido de tudo isso.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Cara, antes de mais nada, obrigado por sua paciência e colaboração.

Eu peguei um codigo pronto, de galeria de imagens.

É um local para "montar" um manequim.

http://billykid.com.br/estilo/

 

A primeira parte são as bermudas, na segunda, a camisa.

A pessoa vai montando e tal.

Acontece que, ao passar para a parte das camisas, eu teria que estar com a bermuda selecionada a qual foi escolhida na parte das bermudas.

 

O codigo é aquele la.

Ai eu pensei em ir gravando a ultima imagem selecionada.

Deu certo, só que, pelo codigo, está assim:

<a class="thumb" name="leaf" 

href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
<img name="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" 

src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" alt="Title #0" onClick="nomeImagem(this)" 

width="75" height="75">
							</a>

Onde o <a href é a imagem "grande" e o <img é o thumb

 

Antes existia uma imagem para cada.

Coloquei só uma e setei o width e height para ficar do tamanho do thumb

 

Pronto, é isso:
Ao passar para a parte das camisas, eu teria que abrir a ultima imagem selecionada e quando voltar para a parte das bermudas tb, a ultima imagem selecionada.

 

Conseguiu entender?

 

Desde já agradeço.


Ai, eu tentei o seguinte:

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

<a class="thumb" name="leaf" href="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" title="Title #0">
<img name="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" 
src="http://farm4.static.flickr.com/3261/2538183196_8baf9a8015.jpg" alt="Title #0" onClick="nomeImagem(this)" width="75" height="75">

Para o nome da <img ser dinâmico a cada clique, e não só aquele "foto"

E setar o href ao invés do src.

 

Todavia, essa minha tentativa não deu certo

 

:(

Compartilhar este post


Link para o post
Compartilhar em outros sites

Veja se isso te ajuda.

 

Nesse exemplo, ao selecionar uma imagem o endereço da imagem irá para o input e também para uma outra tag img que irá mostrar a imagem selecionada.

 

<script>
window.onload = function()
{
	//Função para o evento onclick
	var imagem_selecionada = function()
	{
		var src_image = this.src;
		//Adiciona no input
		document.getElementById("inpt-imagem-escolhida").value = src_image;
		//mostra a imagem escolhida
		document.getElementById("imagem-escolhida").src = src_image;
	};

	var imagens = document.getElementsByClassName("imagem");
	var imagem = null;

	for (var i = 0; i < imagens.length; i++)
	{
  		imagem = imagens[i];
  		imagem.addEventListener("click", imagem_selecionada);
	}

};
</script>

<style>
img{
	width: 100px;
	height: 120px;
	cursor: pointer;
}
</style>
Escolha uma imagem:

<img class="imagem" src="http://www.unixstickers.com/image/cache/data/stickers/gnulinux/tux_sh-600x600.png" >
<img class="imagem" src="http://clipartist.net/RSS/openclipart.org/Unity/tux_enhanced_penguin_linux_art-555px.png" >
<img class="imagem" src="http://simplyeng.com/wp-content/uploads/2008/11/indiana_tux.png" >

Imagem escolhida:

<input type="text" id="inpt-imagem-escolhida">
<img src="" id="imagem-escolhida">

Compartilhar este post


Link para o post
Compartilhar em outros sites

Prezados, eu resolvi fazer com php mesmo.

Joguei os valores das imagens no banco de dados.

Joguei cada imagem no seu local específico.

Mandei o name da imagem para a url

Peguei esse name com php, e carreguei a imagem que eu queria.

 

Podem fechar o topico.

 

Muito obrigado pela ajuda.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

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