Ir para conteúdo

POWERED BY:

Arquivado

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

mkboy

Mudar cores

Por , em Javascript

Recommended Posts

mkboy    1

mkboy
Postado

Tenho um Select que irá listar as cores de determinado produto.Tenho o nome da imagem respectiva a cor.Gostaria que quando selecionar uma opção no select ele ao lado, fora do <select> mude a imagem, de acordo com a seleção!Alguma dica, exemplo, tutorial? :unsure:

Compartilhar este post

Link para o post
Compartilhar em outros sites

eronventer    2

eronventer
Postado

Bom, eu faria da seguinte forma:

 

<script>function mudaIMG(){	 var cor = document.frm_cores.cores.value;	 document.fotoProd.src = cor;}</script><form name="frm_cores">	 <select name="cores" onChange="mudaIMG();">		<option value="cor_azul.jpg">Azul</option>		<option value="cor_verde.jpg">Verde</option>		<option value="cor_branco.jpg">Branco</option>	 </select></form><img src="foto.jpg" border="0" id="fotoProd">

Desta maneira ele irá ter uma foto carregada, mas ao selecionar irá

mudar o src do elemento fotoProd, pode demorar um pouco o carregamento,

tem como melhorar fazendo por array e pré-carregar as imagens mas dai

não sei como fazer.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mkboy    1

mkboy
Postado

Primeiro, grato pela atenção.Eu criei as imagens, e testei e não foi, pode me ajudar?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"><html><head><title>Untitled Document</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script>function mudaIMG(){ var cor = document.frm_cores.cores.value; document.fotoProd.src = cor;}</script></head><body><form name="frm_cores"> <select name="cores" onChange="mudaIMG();"> <option value="verde.gif">Verde</option> <option value="amarelo.gif">Amarelo</option> <option value="azul.gif">Azul</option> <option value="branco.gif">Branco</option> </select></form><img src="foto.jpg" border="0" id="fotoProd"></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

eronventer    2

eronventer
Postado

Teste aqui e funcionou amigo, verifique o diretório onde colocou as imagens.Neste caso devem estar no diretório raiz de sua pasta.

Compartilhar este post

Link para o post
Compartilhar em outros sites

mkboy    1

mkboy
Postado

As imgs estão na mesma pasta!Tem como eu escrever na tela o que ele esta enviando... tipo o nome da cor.. ao mudar... pra mim testar?Ai como eu faria?<input type="text" id="fotoProd">

Compartilhar este post

Link para o post
Compartilhar em outros sites

benck    2

benck
Postado

Amigo, não sei se é isso que você quer, mas se ajudar já valeu!!!

 

<html><head><title>Imagens</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script>	function mudaimagem(item) {		var img = document.getElementById('imagens');		img.innerHTML = '<img src="' + item + '">';	}</script></head><body><select name="list" id="list" onChange="mudaimagem(this.value);">  <option selected>Escolha uma imagem</option>  <option value="http://www.terra.com.br/logo.gif">Terra</option>  <option value="http://home.img.uol.com.br/h1/logo-uol10anos.gif">UOL</option>  <option value="http://www.mandic.com.br/graphics/logo_mandic.gif">Mandic</option></select><br><br><div id="imagens"></div></body></html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

mkboy    1

mkboy
Postado

Isso mesmo!Ficou perfeito.Tem como além de enviar a imagem, ele manter outro valor no option?Tipo este campo o cliente seleciona a cor da roupa, então ele vai selecionando e vendo as cores respectivas, só que ao submeter o form, ele teria que enviar o que está escrito, tipo:<option value="imagens/cor01.gif">Verde</option>Entao ao selecionar o verde ele mostra a cor verde (Perfeito) e ao submeter ele envia a frase Verde.Tem como?

Compartilhar este post

Link para o post
Compartilhar em outros sites

benck    2

benck
Postado

Cara, ai vai o script para pegar a descrição do select. Fiz um script em php para ver se estava tudo legal e funcionou bem...

Ai vai o código

 

<?php	$descricao = $_POST["descricao"];	if($descricao) {		echo "<center>Descrição: $descricao</center>";	}?><html><head><title>Imagens</title><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"><script>	function mudaimagem(item) {		var img = document.getElementById('imagens');		img.innerHTML = '<img src="' + item + '">';	}	function submeter() {		var list = document.getElementById('list');		var i = list.selectedIndex;		document.getElementById('descricao').value = list[i].text;		document.formulario.submit();	}</script></head><body><form action="imagens.php" method="post" name="formulario" id="formulario">	<select name="list" id="list" onChange="mudaimagem(this.value);">	  <option selected>Escolha uma imagem</option>	  <option value="http://www.terra.com.br/logo.gif">Terra</option>	  <option value="http://home.img.uol.com.br/h1/logo-uol10anos.gif">UOL</option>	  <option value="http://www.mandic.com.br/graphics/logo_mandic.gif">Mandic</option>	</select>	<br>	<br>	<input id="descricao" name="descricao" type="hidden" value="">	<div id="imagens"></div>	<input name="Enviar" type="button" id="Enviar" value="Enviar" onClick="submeter();"></form></body></html>

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