[Resolvido] Troca de imagem

[GabrielFerrari 41]

Salve :joia:

 

Fiz uma espécie de botão comutador no site que estou desenvolvendo para trocar a imagem do botão + para -

como pode ser vistos -> http://www.horusenergia.com.br/catalogo.php

 

porém no internet explorer na hora da troca ele não aparece.

a função continua mostrando e escondendo. porém a imagem não altera.

 

O link que chama a função:

<a href="javascript:;" onclick="changeSrc('iluminacao');"><img src="catalogo/imagens/barra_iluminacao.jpg" alt="Iluminação" width="350" height="24" /><!-- ... -->		<!-- ... --><img id="iluminacao" style="padding-left: 10px;" src="catalogo/imagens/mais.jpg" alt="mais"/></a>

Todos os botões estão da mesma forma só altera o ID dentro do changeSrc();

 

e no JS está assim:

function changeSrc(id){	var imagem = document.getElementById(id);	if(imagem.alt == "mais"){		imagem.src = "catalogo/imagens/menos.jpg";		imagem.alt = "menos";		document.getElementById(imagem.id+"_cont").style.display = "block";	}else{		imagem.src = "catalogo/imagens/mais.jpg";		imagem.alt = "mais";		document.getElementById(imagem.id+"_cont").style.display = "none";	}}

 

Alguma luz?

Obrigado!

[William Bruno 1501]

que tal:

document.getElementById(id+"_cont").style.display = "block";

 

isola o problema, e posta um codigo minimo para testarmos.

[Eliseu M. 2]

Não seria mais fácil com jQuery? Crie um elemento .mais e outro .menos, com imagens de fundo diferentes (óbvio), então mude o atributo de acordo com o click.

[brcontainer 16]

Não seria mais fácil com jQuery? Crie um elemento .mais e outro .menos, com imagens de fundo diferentes (óbvio), então mude o atributo de acordo com o click.

Amigo nem todos usam Jquery, tem quem goste de criar suas proprias aplicações, assim usando o JAVASCRIPT somente para o necessario, Jquery é bom quando usamos varias aplicações

 

Acho desnecessario uma biblioteca inteira para um efeito simples, stou apenas expondo minha opnião

 

Atenciosamente Silverfox

[GabrielFerrari 41]

que tal:

 

 

document.getElementById(id+"_cont").style.display = "block";

 

isola o problema, e posta um codigo minimo para testarmos.

 

 

 

Fiz um arquivo apenas com a imagem do + e -

e estranhamente funcionou no IE

apesar de estar igual ao código anterior

 

Quem quiser dar uma olhada nesse que fiz simplificado:

http://www.gabrielwe...go_e_imagem.rar

Porém continua dando erro no script

 

 

 

Não seria mais fácil com jQuery? Crie um elemento .mais e outro .menos, com imagens de fundo diferentes (óbvio), então mude o atributo de acordo com o click.

É como o silverfox disse

Tenho apenas esse efeito isolado no site

 

Carregar uma biblioteca toda apenas para isso acho um pouco desnecessário

mas se o prazo apertar vou acatar sua idéia obrigado

[William Bruno 1501]

Tá dando erro no script, pq tá faltando o elemento id+"_cont", mas não tem mais nada errado...

 

cadê o resto do HTML ?

acho que alguma outra coisa pode estar interferindo.

[GabrielFerrari 41]

Esse resto que você precisa:

 

<h1>Catálogos</h1>		<h2 style="color: #022e84;">Produtos</h2>		<a href="javascript:;" onclick="changeSrc('iluminacao');"><img src="catalogo/imagens/barra_iluminacao.jpg" alt="Iluminação" width="350" height="24" /><!-- ... -->		<!-- ... --><img id="iluminacao" style="padding-left: 10px;" src="catalogo/imagens/mais.jpg" alt="mais"/></a>		<div id="iluminacao_cont">			<br/>			<a class="acatalogo" href="javascript:;" onclick="Cdownloads1();"><img src="catalogo/imagens/botao1.jpg" alt="Ambientes Internos" /></a>								<div id="esconde_download1">					<img class='pdf' src='catalogo/imagens/download.jpg' border='0' /> <a class='acatalogo' href='catalogo/liberar.php?id=Linear_Wash_R1'>LED Linear Washer</a><br/><br/>					<img class='pdf' src='catalogo/imagens/download.jpg' border='0' /> <a class='acatalogo' href='catalogo/liberar.php?id=Tubular_60_R1'>Lâmpada Tubular LED 60 R1</a><br/><br/>					<img class='pdf' src='catalogo/imagens/download.jpg' border='0' /> <a class='acatalogo' href='catalogo/liberar.php?id=Tubular_120_R1'>Lâmpada Tubular LED 120 R1</a><br/><br/>					<img class='pdf' src='catalogo/imagens/download.jpg' border='0' /> <a class='acatalogo' href='catalogo/liberar.php?id=Industrial_80R1'>Luminária LED HighBay 80</a><br/><br/>					<img class='pdf' src='catalogo/imagens/download.jpg' border='0' /> <a class='acatalogo' href='catalogo/liberar.php?id=MR16_LAMP'>MR16LAMP</a><br/><br/>					<img class='pdf' src='catalogo/imagens/download.jpg' border='0' /> <a class='acatalogo' href='catalogo/liberar.php?id=PAR_LAMP'>PARLAMP</a>				</div>							<div class="div_pont"></div>			<a class="acatalogo" href="javascript:;" onclick="Cdownloads2();"><img src="catalogo/imagens/botao4.jpg" alt="Iluminação Pública" /></a>								<div id="esconde_download2">					<img class='pdf' src='catalogo/imagens/download.jpg' border='0' /> <a class='acatalogo' href='catalogo/liberar.php?id=wash_web_small'>Linha LED WASH</a>				</div>							<div class="div_pont"></div>			<a class="acatalogo" href="javascript:;" onclick="Cdownloads3();"><img src="catalogo/imagens/botao2.jpg" alt="Lâmpadas Econômicas" /></a>								<div id="esconde_download3">					<img class='pdf' src='catalogo/imagens/download.jpg' border='0' /> <a class='acatalogo' href='catalogo/liberar.php?id=ip_web_small'>Linha LED IP</a>					</div>							<div class="div_pont"></div>					<a class="acatalogo" href="javascript:;" onclick="Cdownloads4();"><img src="catalogo/imagens/botao3.jpg" alt="Projetores" /></a>								<div id="esconde_download4">					<img class='pdf' src='catalogo/imagens/download.jpg' border='0' /> <a class='acatalogo' href='catalogo/liberar.php?id=residencial_web'>Linha Residencial</a>				</div>						</div>		<br/>		<!-- Nitrogenio -->		<!--<a href="#ponto2" onclick="changeSrc('nitro');"><img id="ponto2" src="catalogo/imagens/barra_nitro.jpg" alt="Nitrogênio" width="350" height="24" />			<img id="nitro" style="padding-left: 10px;" src="catalogo/imagens/mais.jpg" alt="mais"/></a>		<div id="nitro_cont">			<p>Nitrôgenio</p>		</div>		-->		<h2 style="padding-top: 30px; color: #022e84;">Serviços</h2>		<a href="javascript:;" onclick="changeSrc('lumino');"><img id="ponto3" src="catalogo/imagens/barra_lumino.jpg" alt="Nitrogênio" width="350" height="24" />		<!-- ... --> <img id="lumino" style="padding-left: 10px;" src="catalogo/imagens/mais.jpg" alt="mais"/></a>		<div id="lumino_cont">			<p id="projeto_lumi">Desenvolvimento de Projetos Luminotécnicos Customizados para todos os segmentos, incluindo: Iluminação Pública, Destaque de Fachadas, Indústrias, Comércios e Serviços.</p>		</div>		<br/>		<a href="javascript:;" onclick="changeSrc('reluz');"><img id="ponto4" src="catalogo/imagens/barra_reluz.jpg" alt="Nitrogênio" width="350" height="24" />		<!-- ... --><img id="reluz" style="padding-left: 10px;" src="catalogo/imagens/mais.jpg" alt="mais"/></a>		<div id="reluz_cont">			<div style="padding-top: 7px; float: left;"><a class="acatalogo" href="catalogo/liberar.php?id=347os_reluz">Download da apresentação</a></div> <img style="float: right; padding-bottom: 20px;" src="imagens/procel_reluz.gif" />					</div>		<br/>		<a href="javascript:;" onclick="changeSrc('energetica');"><img id="ponto5" src="catalogo/imagens/barra_energetica.jpg" alt="Nitrogênio" width="350" height="24" />		<!-- ... --><img id="energetica" style="padding-left: 10px;" src="catalogo/imagens/mais.jpg" alt="mais"/></a>		<div id="energetica_cont">			<p id="acessoria_energ">Todos nossos projetos contemplam as análises de impacto energético, ambiental e a melhor solução aos nossos clientes sob a ótica de retorno dos investimentos.</p>		</div>

 

 

?

 

 

O cara me pediu tanta alteração! Mas tanta alteração!! que o código ficou um pouco bagunçado

 

 

 

EDIT

 

Se eu colocar um alert antes do

document.getElementById(imagem.id+"_cont").style.display = "block";

funciona

fiquei perdido agora

 

 

 

EDIT 2

 

Cancei de qubrar a cabeça e resolvi fazer com Jquery mesmo:

$(document).ready(function() {	$('#iluminacao').click(	 function(){		var valor_img = document.getElementById("iluminacao").alt;		if(valor_img == "mais"){			$('#iluminacao').attr('src', 'catalogo/imagens/menos.jpg');			 $('#iluminacao').attr('alt', 'menos');			 document.getElementById("iluminacao_cont").style.display = "block"; 	}else{			$('#iluminacao').attr('src', 'catalogo/imagens/mais.jpg');			 $('#iluminacao').attr('alt', 'mais');			 document.getElementById("iluminacao_cont").style.display = "none"; 	}	});});

 

Obrigado pela força