Como colocar link em imagem onclick?

[SiD Menezes 0]

Bom dia pessoal,

Preciso desenvolver uma série de links, que ao clicar mude sua imagem de exibição e ao clicarem na imagem, o usuário entre na pagina que a imagem faz referencia.


Então utilizei o código abaixo

 

<a href="#1" onclick="document.getElementById('imagem').src='images/imagem1.png'">Link 1</a>
<a href="#2" onclick="document.getElementById('imagem').src='images/imagem2.png'">Link 2</a>
<a href="#3" onclick="document.getElementById('imagem').src='images/imagem3.png'">Link 3</a>
<a href="#4" onclick="document.getElementById('imagem').src='images/imagem4.png'">Link 4</a>

//Apresentar a imagem
<img src="" id="imagem" />

Porém não sei como fazer cada imagem ter um link diferente.

Alguém pode me ajudar?

[Henrique de Souza 3]

Não sei se entendi direito, mas você pode tentar assim:

 

JavaScript

 

imagem_principal = documente.getElementById("imagem");
link_principal = documente.getElementById("link");
imagemI = documente.getElementById("link1");
imagemII = documente.getElementById("link2");


imagemI.onclick = function () { imagem_principal.src = "imgs/imagem1.png"; link_principal = "./pagina-de-referencia1"; }
imagemII.onclick = function () { imagem_principal.src = "imgs/imagem2.png"; link_principal = "./pagina-de-referencia2"; }

 

HTML

<a href="#" id="link1">Link 1</a> <a href="#" id="link2">Link 2</a> <a href="#" id="link"><img src="imgs/imagem1.png" alt="" id="imagem"/></a>

 

 

[CamilaLopez 9]

<a href="#1" onclick="evento()"><img src="" id="imagem" /></a>

 

[Henrique de Souza 3]

Obs: cometi um erro na parte de JavaScript: é document não document. Outro erro: Na parte:

 

link_principal = "./pagina-de-referencia1"

...

Deveria ser:

 

link_principal.href  = "./pagina-de-referencia"
...

Desculpe --'