Prever imagens com Javascript
Aug 23, 2008 Javascript
Objectivo
O objectivo deste tutorial é explicar como criar uma lista de opções de imagens em que o visitante do nosso site possa escolher cada hipótese e ter um preview da imagem seleccionada.
Para tal vamos usar Javascript para criar o efeito.
Começo por explicar primeiro o HTML em que consiste numa forma e de uma imagem, e de seguida explico o Javascript que não passa de uma pequena função para mudar de imagem cada vez que o visitante selecciona uma nova opção.
Para veres o que queremos criar basta seguir o link.
O HTML
O HTML é simples e consiste apenas de uma forma com uma lista e as várias hipóteses que o visitante tem.
<form name="SelecionarImagem"> <select name="ImagemEscolha" onChange="ImagemSelecionada()"> <option value="contribuinte.jpg">Imagem Um</option> <option value="membro.jpg">Imagem Dois</option> <option value="membrodomes.jpg">Imagem Tres</option> </select> </form> <img src="images/icons/admin.jpg" id="imagemmudar">
O primeiro passo é criar uma forma e dar o nome de SelecionarImagem.
De seguida criamos uma lista com as várias hipóteses que o visitante tem, neste caso tem três imagens que pode escolher, em cada hipótese dá-mos o valor da imagem.
Também dá-mos um nome para esta lista ImagemEscolha.
Uma parte importante neste código é:
onChange="ImagemSelecionada()"
Isto serve para cada vez que o visitante seleccione uma hipótese chama a nossa função em Javascript, essa função é a que troca as imagens para o visitante ver um preview.
Por fim temos uma imagem, com a primeira escolha disponível. Esta imagem ira mudar-se sempre que o visitante seleccione outra hipótese, não esquecer o id imagemmudar.
O Javascript
O Javascript consiste numa pequena função que a única coisa que faz e agarrar no valor da hipótese escolhida e trocar a imagem para o visitante ver o preview.
<script language="javascript">
function ImagemSelecionada(){
var ImagemSelecionada = document.SelecionarImagem.ImagemEscolha;
var ImagemMostrar = ImagemSelecionada.options[ImagemSelecionada.selectedIndex].value
document.getElementById("imagemmudar").src = "images/icons/"+ImagemMostrar+""
}
</script>
Primeira passo que fazemos é criar uma função entre as tags headers do html, de seguida declaramos uma variável ImagemSelecionada para agarrar todas as opções disponíveis.
Basicamente esta linha funciona:
var ImagemSelecionada //Declarar variável document.SelecionarImagem.ImagemEscolha //Document.NomeQueDemosAForma.NomeDoSelect
A segunda linha é uma nova variável que guarda a escolha do visitante e o seu valor:
var ImagemMostrar //Declarar variável ImagemSelecionada.options[ImagemSelecionada.selectedIndex].value //Serve para guardar o valor escolhido.
Por fim só resta trocar a imagem para isso:
Basicamente esta linha funciona:
document.getElementById("imagemmudar").src = "images/icons/"+ImagemMostrar+""
getElementById serve para agarrar o elemento que queremos modificar, como o elemento e uma imagem de seguida usamos .src, para modificarmos a imagem.
De seguida e só por a path onde as nossas imagens estão e a variável do valor da imagem.
Conclusão
E pronto esta feito, como vimos não e assim tão complicado.
Este exemplo foi testado em IE6, Firefox e Opera e resulta perfeitamente e podemos ver a ser usado aqui.
