Jump to content



Photo

Como Trocar Imagem Ao Clicar?


  • Please log in to reply
6 replies to this topic

#1 jeanpaulo

jeanpaulo

    Novato no fórum

  • Usuários
  • 12 posts
  • Sexo:Não informado

Posted 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 shayllis

shayllis

    12 Horas

  • Usuários
  • 152 posts
  • Sexo:Masculino
  • Localidade:Barueri - SP
  • Interesses:PHP, MySQL, ASP.NET C# e VB, DreamWeaver, VisualStudio, JavaScript

Posted 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 jeanpaulo

jeanpaulo

    Novato no fórum

  • Usuários
  • 12 posts
  • Sexo:Não informado

Posted 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 Fábio Web Arts

Fábio Web Arts

    Web IN Arts

  • Usuários
  • 299 posts
  • Sexo:Masculino
  • Localidade:No Saco De Magé
  • Interesses:Tudo que for da área de Informática

Posted 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 shayllis

shayllis

    12 Horas

  • Usuários
  • 152 posts
  • Sexo:Masculino
  • Localidade:Barueri - SP
  • Interesses:PHP, MySQL, ASP.NET C# e VB, DreamWeaver, VisualStudio, JavaScript

Posted 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 jeanpaulo

jeanpaulo

    Novato no fórum

  • Usuários
  • 12 posts
  • Sexo:Não informado

Posted 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 shayllis

shayllis

    12 Horas

  • Usuários
  • 152 posts
  • Sexo:Masculino
  • Localidade:Barueri - SP
  • Interesses:PHP, MySQL, ASP.NET C# e VB, DreamWeaver, VisualStudio, JavaScript

Posted 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




0 user(s) are reading this topic

0 membro(s), 0 visitante(s) e 0 membros anônimo(s)

IPB Skin By Virteq