Fórum WMO: Como Trocar Imagem Ao Clicar? - Fórum WMO

Ir para

Página 1 de 1
  • Novo tópico
  • Responder
  • Ícone  Compartilhar

Como Trocar Imagem Ao Clicar? menu com abas com imagens em carousel e css

#1 Membro offline   jeanpaulo 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 12
  • Cadastrado: 12/02/2004
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 07/06/2010, 08:39

http://www.zulk.com....l-zulk/zulk.zip

ola, to fazendo um site http://www.zulk.com.br/portal-zulk/ e quero colocar um menu com abas nele. fiz em dreanwever o menu com abas mais nao gostei, se vcs olharem no site esta la. procurei muito um codigo diferente e axei um feito em jquery se nao me engano, pois o que quero é que quando clicar o conteudo troque fazendo um efeito lateral tipo um elastico. consegui fazer, mesmo sem entender de javascript e jquery. entendo so a logica e juntei dois codigos ficou bom.

para trocar de aba temos que clicar nun link. com muita luta consegui fazer esse link ser imagem ao invés de texto. eu quero usar imagem pq a fonte que vou utilizar nao tem em todos os computadores.

bem o que eu quero é que assim que passar o mouse a figura do nome mude para uma outra fonte mais grossa, e assim que clicar esse fonte fique grossa pra indicar a aba que o usuario esta lendo.

se possivel tambem gostaria de que essas abas mudassem automaticamente antes do usuario clicar. e assim que ele clicar a aba para e nao muda mais.

pra fazer esse codigo eu peguei daqui o exemplo daqui http://www.zulk.com....rtal-zulk/z.zip



entao eu gostaria que alguem alterasse meu codigo com essas informacoes e mandasse pra meu email z@zulk.com.br e depois eu posto aqui o resultado para outras pessoas do forum poderem ver o codigo completo e correto.
0

#2 Membro offline   shayllis 

  • 12 Horas
  • Ícone
  • Grupo: Usuários
  • Posts: 152
  • Cadastrado: 13/04/2010
  • Sexo:Masculino
  • Localidade:Barueri - SP
  • Interesses:PHP, MySQL, ASP.NET C# e VB, DreamWeaver, VisualStudio, JavaScript
Pontos: 13
Good

Postou 09/06/2010, 16:45

Já tentou usar javascript?
Você poderia fazer assim:
<img src="endereco.ext" onmouseover="src='outraimagem.txt'" onclick="src='outraimagem2.ext' onmoveout="src='enderco.ext'">
Não é exatamente o que você procura, mas já pode ajudar quanto a metodologia
0

#3 Membro offline   jeanpaulo 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 12
  • Cadastrado: 12/02/2004
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 11/06/2010, 14:20

eu fiz isso e deu certo, mais nao é bem o que eu queria. pois a imagem so é trocada quando o mouse esta em cima da foto. eu quero que a foto mude com o clique pra pessoa sabe em qual menu ela esta.
0

#4 Membro offline   Fábio Web Arts 

  • Web IN Arts
  • Ícone
  • Grupo: Usuários
  • Posts: 299
  • Cadastrado: 27/01/2009
  • Sexo:Masculino
  • Localidade:No Saco De Magé
  • Interesses:Tudo que for da área de Informática
Pontos: 3
Neutral

Postou 11/06/2010, 14:39

o script aqui:

function reloadImage(img) {
document.images["L_image"].src=document.images["L_image"].src+"?"+new Date();
}

como usar:

<img src="../captcha/visual.php" id="L_image" title="Clique para trocar de imagem" onclick="reloadImage(this);" width='200' height='60' alt='Visual CAPTCHA' style='border: 1px solid #000000; padding: 2px;' />

eu nao caso ae uso isso com captcha!
0

#5 Membro offline   shayllis 

  • 12 Horas
  • Ícone
  • Grupo: Usuários
  • Posts: 152
  • Cadastrado: 13/04/2010
  • Sexo:Masculino
  • Localidade:Barueri - SP
  • Interesses:PHP, MySQL, ASP.NET C# e VB, DreamWeaver, VisualStudio, JavaScript
Pontos: 13
Good

Postou 18/06/2010, 14:48

Ainda dah pra mudar, se você quiser que apareça a mãozinha, ao invés da simples seta do poteiro, é só colocar
<a href="#" onclick="reloadImage(this);"><img src="../captcha/visual.php" id="L_image" title="Clique para trocar de imagem" width='200' height='60' alt='Visual CAPTCHA' style='border: 1px solid #000000; padding: 2px;' /></a>
0

#6 Membro offline   jeanpaulo 

  • Novato no fórum
  • Ícone
  • Grupo: Usuários
  • Posts: 12
  • Cadastrado: 12/02/2004
  • Sexo:Não informado
Pontos: 0
Neutral

Postou 20/06/2010, 11:07

alguem poderia fazer as alteracoes pra mim? inclunindo a maozinha? eheheh
nao sou muito bom de codigo. so trabalho mais com designer. ai se alguem fizer manda pra meu email z@zulk.com.br
0

#7 Membro offline   shayllis 

  • 12 Horas
  • Ícone
  • Grupo: Usuários
  • Posts: 152
  • Cadastrado: 13/04/2010
  • Sexo:Masculino
  • Localidade:Barueri - SP
  • Interesses:PHP, MySQL, ASP.NET C# e VB, DreamWeaver, VisualStudio, JavaScript
Pontos: 13
Good

Postou 21/06/2010, 19:19

só funciona no ie8, no 7 não, e nos outros browsers sim. + fica assim:
<script ty="text/javascript">
function reloadImage(img) {
document.getElementById["L_image"].src= "endereco da outra imagem";
}
</script>
<a href="#" onclick="reloadImage(this);"><img src="../captcha/visual.php" id="L_image" title="Clique para trocar de imagem" width='200' height='60' border="0" id="L_image"/></a>
0

Página 1 de 1
  • Novo tópico
  • Responder

1 usuário(s) está(ão) lendo este tópico
0 membro(s), 1 visitante(s) e 0 membros anônimo(s)