Ir para conteúdo

POWERED BY:

Arquivado

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

TubaraoBR

Troca de Imagens

Por , em Javascript

Recommended Posts

TubaraoBR    0

TubaraoBR
Postado

Bom dia, gostaria de criar um script, onde três imagens, ou mais, se alternem em um local.

 

O script abaixo, é um exemplo do que eu tenho:

 

 

Javascript
<script type="text/javascript">
function TrocarImagem(imagem){
imagem = imagem;
document.getElementById("ImagemPrincipal").src = imagem;
}
</script>
HTML
<img id="ImagemPrincipal" src="img_exp/img1.jpg" alt=""><br /><br /><br />
<img src="img_exp/img1.jpg" border="0" alt="" id="link_bg" onclick="javascript:TrocarImagem('img_exp/img1.jpg');" />
<img src="img_exp/img2.jpg" border="0" alt="" id="link_bg" onclick="javascript:TrocarImagem('img_exp/img2.jpg');" />
<img src="img_exp/img3.jpg" border="0" alt="" id="link_bg" onclick="javascript:TrocarImagem('img_exp/img3.jpg');" />
-----------------------------------------------------------------------
Esse script, funciona perfeitamente. São 3 Imagens.
A primeira, inicia exibindo em um lugar....
As outras são botões, que ao ser clicado, troca a primeira imagem pela imagem clicada.
É quase isso que eu quero.
O que eu quero mesmo, é que a imagem que está sendo exibida, não apareça como botão.
Se ela já está sendo exibida, ela não precisa aparecer.
Daí nesse exemplo que eu publiquei acima, ficaria na parte de cima, exibindo uma image, com dois botões de imagens diferentes, daí ao clicar, a imagem de cima seja substituida pela imagem clicada, e o botão que foi clicado, transforme na imagem que estava sendo exibida em cima.
Se alguem puder me ajudar nisso, agradeço.
OBS: Se já exisitir algum jquery nesse sentido, eu até prefiro. Para dar um efeito bem legal.
Eu gostaria de obter um resultado final parecido com o link a seguir:

 

 

Compartilhar este post

Link para o post
Compartilhar em outros sites

Morpheus#2005    1

Morpheus#2005
Postado 

<!DOCTYPE html>
 <html>
 <head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 </head>
 <body>
<img id="principal" src="imasters.jpg">
 <a href="#"> Trocar </a>
<script>
 $("a").click(function(){
   $("#principal").attr("src", "morpheus.jpg");
 });
 </script>
</body>
 </html>

 

<!DOCTYPE html>
 <html>
 <head>
 <script src="http://code.jquery.com/jquery-latest.js"></script>
 </head>
 <body>
<img id="principal" src="imasters.jpg">
 <a href="#"> Trocar </a>
<script>
 $("a").click(function(){
   $("#principal").attr("src", "morpheus.jpg");
 });
 </script>
</body>
 </html>

 

Good Luck!!!

Compartilhar este post

Link para o post
Compartilhar em outros sites

TubaraoBR    0

TubaraoBR
Postado

Obrigado pela resposta Morpheus... mas não seria bem isto que eu quero.

 

 

O primeiro ítem que não me agradou, foi o link em texto... isso até não seria problema, bastaria colocar um img e pronto...

 

Porém, eu quero que o lijnk seja uma imagem pois a imagem do botão, será susbtituida pela imagem que está aparecendo maior.

 

Segundo que seu link, ele só clica e para, substitui apenas uma imagem e pára, não fica alternando entre imagens.

 

Dá uma olhadinha no link que eu postei de imagem.

 

http://www.emaiscomunica.com.br/forum.jpg

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