Objectivo

O objectivo deste tutorial é explicar como criar uma lista de opções de imagens em que o visitante(user) 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 e 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 e simples e consiste apenas de uma forma com uma lista e as várias hipóteses que o visitante(user) 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 e criar uma forma e dar o nome de SelecionarImagem. De seguida criamos uma lista com as várias hipóteses que o user 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 e:

onChange="ImagemSelecionada()"

Isto serve para cada vez que o visitante(user) muda uma hipótese chama a nossa função em Javascript, essa função e a que troca as imagens para o visitante(user) ver um preview.
Por fim temos uma imagem, com a primeira escolha disponível. Esta imagem ira trocar-se sempre que o visitante mudar de 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 coisa que fazemos e uma função, 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.NOME DA FORMA.NOME DO SELECT HIPOTESSES
A segunda linha e uma nova variável que agarra a especifica escolha do user e o seu valor:
var ImagemMostrar -- > Declarar variável
ImagemSelecionada.options[ImagemSelecionada.selectedIndex].value -- > Serve para agarrar o valor escolhido.

Por fim só resta trocar a imagem para isso:
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.