Ir para conteúdo

POWERED BY:

Arquivado

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

mze

[Resolvido] onclick só funciona em um elemento!

Recommended Posts

Oi.. estou fazendo uma galeria de imagens e to com um problema na hora de programa a função onclick, a idéia eh o seguinte, a galeria de imagem irar exibir thumbs do lado esquerdo, e qd o usuario clicar nela sera ampliada em 1 uma div da direita... a função load é carregada no final da minha galeria...

function load(){
var foto = document.getElementById("foto");
foto.onclick = function(){ alert("Teste")};
}

o erro acontece na hora de clicar nas foto, apenas a primera da o alert as restante não dao alert, todas as fotos possuem o id=foto...

obrigado

Compartilhar este post


Link para o post
Compartilhar em outros sites

hmm obrigado mas tem algum conselho? se eu bota as ID diferente vo ter que fazer um getelementbyId pra todas elas.. o que tornaria inviavel...

Compartilhar este post


Link para o post
Compartilhar em outros sites

não, faz uma funçao que aceite como parametro o id...assim uma função para todas..entendeu??..t+

Compartilhar este post


Link para o post
Compartilhar em outros sites

acho que não intendi...

function amplia(id){
document.getElementById(id).onclick=function () { alert("teste"); }
}
<img src=xx.jpg id=1 onclick=amplia(1)>

esse jeito você diz? mas ai o javascript se tornaria obstrutivo

Compartilhar este post


Link para o post
Compartilhar em outros sites

<script>
	window.onload = function() {
		thumbs = document.images;
		for (i = 0; i < thumbs.length; i++) {
			if (thumbs[i].className == 'thumb') {
				thumbs[i].onclick = function() {
					alert('amplia');
					return false;
				}
			}
		}
	}
</script>

<p align="center"><img src="" width="660" height="90"><br />
  <a href="1.html"><img src="" width="150" height="250" border="0" class="thumb"></a> 
  <a href="2.html"><img src="" width="150" height="250" border="0" class="thumb"></a> 
  <a href="3.html"><img src="" width="150" height="250" border="0" class="thumb"></a><br />
  <a href="4.html"><img src="" width="150" height="250" border="0" class="thumb"></a> 
  <a href="imagem5.jpg"><img src="" width="150" height="250" border="0" class="thumb"></a> 
  <a href="imagem6.jpg"><img src="" width="150" height="250" border="0" class="thumb"></a><br />
<img src="" width="660" height="90"></p>

O script monta um array com todas as imagens do documento, para diferenciar as thumbs, utilizei a class thumb. Ao clicar na thumb ele exibe o alert, nesse ponto você implementa o restante. Caso javascript não esteja habilitado, ele exibe a página (que também pode ser uma imagem, como nos href's das thumbs 5 e 6.

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.