PTTutoriais

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.