Ir para conteúdo

POWERED BY:

Arquivado

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

Simpsons

Alterar Imagem

Por , em Javascript

Recommended Posts

Simpsons    0

Simpsons
Postado

Olá todos. Tudo bem ?

 

Eu criei uma pagina em html onde eu criei um link em uma imagem chamada imagem1.jpg, que quando eu clico, exibe ou esconde uma DIV.

 

eE gostaria de saber, como eu faço para quando a DIV estiver sendo exibida mostra a imagem imagem1.jpg, caso esteja oculta exibe a imagem2.jpg

 

Valew

Compartilhar este post

Link para o post
Compartilhar em outros sites

Humberto Oliveira Pinto    8

Humberto Oliveira Pinto
Postado

Vê se é útil

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
</head>
<script>
// some e aparece
function tabselect(n){
 for(x=1;x<=11;x++){
   panel=eval('document.all.panel' + x + '.style;');
   if(x==n){
     panel.display='';
   }
   else {
     panel.display='none';
   }
 }
}
</script>
<body>
<table width="100%" border="0" cellspacing="0" cellpadding="0">
 <tr id="panel1" style="display='none'">
   <td><a href="javascript:void(0);" onclick="tabselect(2);">#img1#</a></td>
 </tr>
 <tr id="panel2" style="display='none'">
   <td><a href="javascript:void(0);" onclick="tabselect(1);">#img2#</a><br />
#conteudo#</td>
 </tr>
</table>
</body>
</html>
<script>
tabselect(1);
</script>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Simpsons    0

Simpsons
Postado

Olá Humberto.

 

Obrigado pela força.

 

Colei seu codigo e reparei que só funciona no IE, e eu uso o FIREFOX..

 

Oque eu preciso na verdade é do seguinte:

 

Eu tenho uma DIV que fica OCULTA ou VISIVEL, OK

 

E eu tenho uma imagem que tem o link para chamar a função que faz OCULTAR ou VISUALIZAR a DIV, OK.

 

Dai eu queria que quando a DIV estivesse OCULTA exibisse a imagem CLICK PARA EXIBIR, quando a DIV estiver VISIVEL exibe a imagem CLICK PARA OCULTAR.

 

Mas isso ocorreria somente com o link, o conteudo que exibe e oculta fica na DIV separada.

 

No codigo que passou o conteudo fica junto.

 

Como posso fazer isso ? Existe algum exemplo ?

 

E obrigado pela força que vem me dando.

Compartilhar este post

Link para o post
Compartilhar em outros sites

Simpsons    0

Simpsons
Postado

Olá Bills.

 

Cara, obrigado pela força, é isso mesmo que eu preciso.

 

E seja bem vindo ao ramo da web.

 

Então cara, peguei seu exemplo e fiz uns testes aqui, mas não funcionou, olha como ficou meu codigo.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">

// globais
var button = document.getElementById('button'),
    image = document.getElementById('image'),
    imageDiv = document.getElementById('imageDiv');
    
    url_ocultar = "https://dl.dropbox.com/u/23008941/Imagens/Duvidas/ocultar.jpg",
    url_mostrar = "https://dl.dropbox.com/u/23008941/Imagens/Duvidas/mostrar.jpg",
    url_imagem = "https://dl.dropbox.com/u/23008941/Imagens/Duvidas/imagem.png";

image.src = url_imagem;
button.src = url_ocultar;

$("#button").click( function(){
  if (imageDiv.style.display == 'block') {
    imageDiv.style.display = 'none';
    button.src = url_mostrar;
  } else {
    imageDiv.style.display = 'block';
    button.src = url_ocultar;
  }
  console.log(image.src);
});

</script>
</head>
<style type="text/css">

div {
  border: 1px solid;
  position: absolute;
}

#button:hover {
  cursor: pointer;
}

</style>
<body>

<div>
  <img src="" id="button"/>
</div>
<div id="imageDiv" style="top: 100px" >
  <img src="" id="image"/>
</div>

</body>
</html>

 

Se alguem puder me ajudar a achar o erro.

 

Agradeço

Valew

Compartilhar este post

Link para o post
Compartilhar em outros sites

Bills    2

Bills
Postado

Seu erro é que seu script busca elementos que ainda não foram carragdos pelo navegador.

Existe duas maneiras fáceis de resolve-lo. Pegar seu script e colocar dentro do window.onload ou colocar seu script dentro do <body> DEPOIS dos elementos já criados.

 

Uma dica, evite colocar <script> no <head>, deixe que o javascript seja a ultima coisa a ser carregada em sua página.

 

Veja... colocando o script para carregar no final será uma das maneiras de resolver o erro:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>

</head>
<style type="text/css">

div {
  border: 1px solid;
  position: absolute;
}

#button:hover {
  cursor: pointer;
}

</style>
<body>

<div>
  <img src="" id="button"/>
</div>
<div id="imageDiv" style="top: 100px" >
  <img src="" id="image"/>
</div>

<script type="text/javascript">

// globais
var button = document.getElementById('button'),
    image = document.getElementById('image'),
    imageDiv = document.getElementById('imageDiv');
    
    url_ocultar = "https://dl.dropbox.com/u/23008941/Imagens/Duvidas/ocultar.jpg",
    url_mostrar = "https://dl.dropbox.com/u/23008941/Imagens/Duvidas/mostrar.jpg",
    url_imagem = "https://dl.dropbox.com/u/23008941/Imagens/Duvidas/imagem.png";

image.src = url_imagem;
button.src = url_ocultar;

$("#button").click( function(){
  if (imageDiv.style.display == 'block') {
    imageDiv.style.display = 'none';
    button.src = url_mostrar;
  } else {
    imageDiv.style.display = 'block';
    button.src = url_ocultar;
  }
  console.log(image.src);
});

</script>

</body>
</html>

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