Ir para conteúdo

POWERED BY:

Arquivado

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

ckattab

Apontar divs diferentes com Javascript

Por , em Javascript

Recommended Posts

ckattab    0

ckattab
Postado

Boa noite, pessoal!

 

Sou iniciante em Javascript e estava tentando fazer um script onde eu clico em uma div que só tenha texto e ela carregue uma imagem em outra div. Pesquisei, li e tentei fazer funcionar por horas e por fim, cá estou eu pedindo ajuda. Acho que o método que mais se aproximou do que preciso é o que muda a classe CSS ao clicar mas não consegui substituir o "this" por alguma referência à div que quero apontar a imagem... Preciso de algo que seja validado pela W3C. Detalhe: a div que contém os textos está dentro da div da imagem.

 

Fiz uma imagem que mostra as divs e os textos. São 3 imagens diferentes por div, cada uma em um número, onde eu clico em cada número e as imagens nas divs mudam de acordo...

 

Imagem Postada

 

 

Agradeço a ajuda! Imagem Postada

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

o método parent pode te ajudar nisso..

 

como você fez o HTML ?

Compartilhar este post

Link para o post
Compartilhar em outros sites

ckattab    0

ckattab
Postado 

<div id="ft1">
<div class="ftt_bg">
<div class="ftt">.... 1   |   2   |   3 ....</div>
</div>
</div>

<div id="ft2">
<div class="ftt_bg">
<div class="ftt">.... 1   |   2   |   3 ....</div>
</div>
</div>

<div id="ft3">
<div class="ftt_bg">
<div class="ftt">.... 1   |   2   |   3 ....</div>
</div>
</div>

ft1, ft2, ft3: as 3 imagens que já aparecerão ao abrir a página

ftt_bg: o fundo amarelo com transparência (imagem adicionada por CSS)

ftt: os números referentes a cada imagem

O formato em meu site está exatamente como apresentei no post acima.

 

De todas as coisas que li até o momento não li nada sobre esse modo parent. Que mundo de informação rsrs!

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado 

<html>
<head>
<style type="text/css">
#ft1 li, #ft2 li, #ft3 li { cursor: pointer; }
</style>
<script type="text/javascript">
window.onload = function()
{
	click_li('ft1');
	click_li('ft2');
	click_li('ft3');
}
function click_li( el ){
	var lis = id( el ).getElementsByTagName('li');
	for( var i=0; i<lis.length; i++ ){
		lis[i].onclick = function(){
			troca_img( this );
		}
	}
}
function id( el ){
	return document.getElementById( el );
}
function troca_img( el ){
	var img = el.parentNode.parentNode.getElementsByTagName('img');
	img[0].src = 'images/foto'+el.innerHTML+'.jpg';
}
</script>
</head>
<body>
	<div id="ft1">
		<img src="images/foto1.jpg" alt="" />
		<ul>
			<li>1</li><li>2</li><li>3</li>
		</ul>
	</div><!-- /ft1 -->

	<div id="ft2">
		<img src="images/foto1.jpg" alt="" />
		<ul>
			<li>1</li><li>2</li><li>3</li>
		</ul>
	</div><!-- /ft2 -->

	<div id="ft3">
		<img src="images/foto1.jpg" alt="" />
		<ul>
			<li>1</li><li>2</li><li>3</li>
		</ul>
	</div><!-- /ft3 -->
</body>
</html>

veja que estou supondo imagens, chamadas:

foto1.jpg, foto2.jpg e foto3.jpg

 

se quiser chamar outras, você precisa trabalhar com algum atributo diferente do '.innerHTML'

 

boa sorte! ^_^/>

Compartilhar este post

Link para o post
Compartilhar em outros sites

ckattab    0

ckattab
Postado

Caramba, innerHTML, Id e TagName, tudo misturado! Vou tentar amanhã, hoje já quebrei demais a cabeça por um dia rsrs

 

Minha preocupação batendo o olho nesse seu código é a possibilidade de dar conflito com o CSS que estilizei, o que não foi lá muito simples pois o layout é bem cheio de elementos. Mas como disse, amanhã eu penso e respondo aqui!

 

Bem.. não deu muito certo! Pois tenho outros menus em lista no resto do código... Fica difícil sem mostrar o código inteiro, pelo visto... Mas se você pegasse somente essas imagens e o que eu quero fazer, como seria possível só com javascript? Ou no mercado atual de web se faz de outras maneiras?

Compartilhar este post

Link para o post
Compartilhar em outros sites

William Bruno    1501

William Bruno
Postado

melhore os teus seletores css.. não tem pq os teus outros menus em lista, interferirem no código que eu postei.. se você souber trabalhar corretamente.

 

para o efeito que você pediu, o HTML que você postou, era desnecessário e não semântico, por isso tomei a liberdade de trocar.

Se você precisa que seja da outra forma, estude oque eu fiz, e aplique...

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito