Ir para conteúdo
Fórum Script Brasil
  • 0

Alterando imagem ao clicar na imagem


Renan Mafra

Pergunta

Olá pessoal,

Tenho uma tabela que é gerada automaticamente pelo PHP,

nessa tabela tem uns 12 fotos em thumbnails, quando o usuário clica

no thumbnail aparece a foto grande embaixo, até aí tudo OK.

Mais para cada thumbnail colorido existe um thumbnail igual só que

em preto e branco, gostaria que quando alguém clicasse no thumbnail

colorido aparecesse o thumbnail P/B após o clique.

O nome dos thumbnails são sempre nesse esquema:

thumbnail colorido: thumb_foto01.gif

thumbnail P/B: thumb_02foto01.gif

thumbnail colorido: thumb_foto077.gif

thumbnail P/B: thumb_02foto077.gif

Ou seja o colorido tem sempre a palavra thumb_ na frente do nome da imagem

e o preto e branco é o mesmo nome só que com a palavra thumb_02 na frente.

é para indicar qual o thumb que esta ativo no momento.

Como faço para que quando clicar no colorido apareça o P/B ???

Link para o comentário
Compartilhar em outros sites

3 respostass a esta questão

Posts Recomendados

  • 0

Cara, acho que você deveria mover esse tópico pra javascript e depois fazer com PHP...

Ficaria algo como:

<html>
<head>
<title>Minha página</title>
<script type="text/javascript">
var quantidade_imagem = 5
var ImagemColorida = new Array(quantidade_imagem)
var ImagemPB = new Array(quantidade_imagem)
var ImagemValor = new Array(quantidade_imagem)
function VerificaImagem(id) {
x = document.getElementById(id)
numero_img = id.replace("imagem","")
if (ImagemValor[numero_img]==true) {
x.src = ImagemColorida[numero_img]
ImagemValor[numero_img] = false
}else{
x.src = ImagemPB[numero_img]
ImagemValor[numero_img] = true
}
}
function DefineImagem() {
for (i=1;i<=quantidade_imagem;i++) {
ImagemColorida[i] = "thumb_foto" + i + ".gif"
ImagemPB[i] = "thumb_02foto" + i + ".gif"
ImagemValor[i] = false
}
}
</script>
</head>
<body onload="DefineImagem()">
<img src="---" onclick="VerificaImagem(this.id)" height="400" width="400" id="imagem1">
<img src="---" onclick="VerificaImagem(this.id)" height="400" width="400" id="imagem2">
<img src="---" onclick="VerificaImagem(this.id)" height="400" width="400" id="imagem3">
</body>
</html>

Qualquer coisa, posta aí !

Link para o comentário
Compartilhar em outros sites

  • 0

Jonathan,

As imagens das Thumbs sempre terão como iniciais o seguinte:

Colorida: thumb_

P/B : thumb_02

O resto pode ser qualquer coisa, não tem lógica não por exemplo a não ser

se forem as mesmas imagens aí o final é igual:

por exemplo:

foto colorida: thumb_foto01.jpg

thumb_hmx37.jpg

thumb_gatas00.jpg

foto P/B: thumb_02foto01.jpg

thumb_02hmx37.jpg

thumb_02gatas00.jpg

O seu código funciona assim ?? enquanto isso vou testando aqui

Link para o comentário
Compartilhar em outros sites

  • 0

Cara, tem lógica !

Eu criei um Array para armazenar as informações de cada imagem...

Por exemplo:

Se o valor do Array ImagemColorida[1]for "thumb_foto01.jpg", o valor de ImagemPB[1] será "thumb_02foto01.jpg"

Mas agora fui perceber que você não usa o padrão "thumb_foto" + numero + ".jpg"...

Você utilizou uma imagem: "thumb_hmx37.jpg"

Se for utilizar mais imagens assim você terá que definir manualmente...

A função ficaria assim:

function DefineImagem() {
ImagemColorida[1] = "thumb_foto01.jpg"
ImagemPB[1] = "thumb_02foto01.jpg"
ImagemColorida[2] = "thumb_hmx37.jpg"
ImagemPB[2] = "thumb_02hmx37.jpg"
ImagemColorida[3] = "thumb_gatas00.jpg"
ImagemPB[3] = "thumb_02gatas00.jpg"

for (i=1;i<=quantidade_imagem;i++) {
ImagemValor[i] = false
}

Qualquer coisa, posta aí !

Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,3k
×
×
  • Criar Novo...