[ Pedido ] Clicar na Imagem e expandir um texto

5 participantes

Início :: Paraíso Nerd :: Universo dos programadores :: Suporte e Pedidos :: Questões Resolvidas[ Pedido ] Clicar na Imagem e expandir um texto

Je4n Je4n  • 01.05.13 2:57

[ Pedido ] Clicar na Imagem e expandir um texto Empty [ Pedido ] Clicar na Imagem e expandir um texto 01.05.13 2:57

Olá pessoal!

Gostaria de saber como fazer, em javascript, aparecer um texto na mesma página ao clicar em uma Imagem. Por exemplo, ao clicar na imagem que está na HTML aparecer um texto "teste" na mesme página.

Desde já agradeço.

Troy Troy  • 01.05.13 5:42

[ Pedido ] Clicar na Imagem e expandir um texto Empty Re: [ Pedido ] Clicar na Imagem e expandir um texto 01.05.13 5:42

Tópico em Área Incorreta

Movido para: Informática/Programação

Example Example  • 01.05.13 11:01

[ Pedido ] Clicar na Imagem e expandir um texto Empty Re: [ Pedido ] Clicar na Imagem e expandir um texto 01.05.13 11:01

Ola Convidado

Você está falando do shadowbox? se for avise-me

Até
Atenciosamente
Example

Everything Everything  • 01.05.13 11:03

[ Pedido ] Clicar na Imagem e expandir um texto Empty Re: [ Pedido ] Clicar na Imagem e expandir um texto 01.05.13 11:03

Olá,

é esse o código:

Código:
div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
COLOQUE AQUI O CONTEÚDO QUE FICARÁ OCULTO
</div></div>

Je4n Je4n  • 01.05.13 11:07

[ Pedido ] Clicar na Imagem e expandir um texto Empty Re: [ Pedido ] Clicar na Imagem e expandir um texto 01.05.13 11:07

Como um SPOILER. Ao Clicar na Imagem, abre abaixo um Texto, imagem.. Mais ou menos isso ;s

Je4n Je4n  • 01.05.13 11:10

[ Pedido ] Clicar na Imagem e expandir um texto Empty Re: [ Pedido ] Clicar na Imagem e expandir um texto 01.05.13 11:10

Everything escreveu:Olá,

é esse o código:

Código:
div class="divspoiler">
<input type="button" value="Mostrar" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
COLOQUE AQUI O CONTEÚDO QUE FICARÁ OCULTO
</div></div>

É mais ou menos assim, só que ao invés de um BUTTON, uma imagem no Lugar.

SmasheR SmasheR  • 01.05.13 11:12

[ Pedido ] Clicar na Imagem e expandir um texto Empty Re: [ Pedido ] Clicar na Imagem e expandir um texto 01.05.13 11:12

Reputação da mensagem: 100% (1 votos)
O código do Everything e do Esteban. são botões, não uma imagem...

Acho que se você trocar para
<div class="divspoiler">
<input type="image" src="IMAGEM" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
COLOQUE AQUI O CONTEÚDO QUE FICARÁ OCULTO
</div></div>

deve funcionar da maneira que quer. Ainda não testei os códigos deles, mas imagino que vai.

Everything Everything  • 01.05.13 11:15

[ Pedido ] Clicar na Imagem e expandir um texto Empty Re: [ Pedido ] Clicar na Imagem e expandir um texto 01.05.13 11:15

Olá, pode ser como o usuário acima citou e também dessa forma:
Código:
<img src="url da imagem ou /asjai/" alt="Nome da imagem" />

SmasheR SmasheR  • 01.05.13 11:18

[ Pedido ] Clicar na Imagem e expandir um texto Empty Re: [ Pedido ] Clicar na Imagem e expandir um texto 01.05.13 11:18

Everything escreveu:Olá, pode ser como o usuário acima citou e também dessa forma:
Código:
<img src="url da imagem ou /asjai/" alt="Nome da imagem" />

Na verdade acho que não vai funcionar não, já que a tag do seu código é input, então é só definir o input para image.

Mas você pode adicionar o alt="Nome da imagem" depois do src="IMAGEM (LINK)" se quiser, só que isso só muda na hora de passar o mouse em cima da imagem (vai aparecer o que estiver no alt).

EDIT: O tópico tá na área errada ainda (isso não é PHP)


Última edição por SmasheR em 01.05.13 11:24, editado 1 vez(es)

Everything Everything  • 01.05.13 11:21

[ Pedido ] Clicar na Imagem e expandir um texto Empty Re: [ Pedido ] Clicar na Imagem e expandir um texto 01.05.13 11:21

Olá,

talvez :D

Je4n Je4n  • 01.05.13 11:25

[ Pedido ] Clicar na Imagem e expandir um texto Empty Re: [ Pedido ] Clicar na Imagem e expandir um texto 01.05.13 11:25

SmasheR escreveu:O código do Everything e do Esteban. são botões, não uma imagem...

Acho que se você trocar para
<div class="divspoiler">
<input type="image" src="IMAGEM" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = 'Ocultar'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = 'Mostrar'; }" />
</div><div><div class="spoiler" style="display: none;">
COLOQUE AQUI O CONTEÚDO QUE FICARÁ OCULTO
</div></div>

deve funcionar da maneira que quer. Ainda não testei os códigos deles, mas imagino que vai.

Funcionou corretamente, obrigado pela a ajuda :D

Grato.
Início :: Paraíso Nerd :: Universo dos programadores :: Suporte e Pedidos :: Questões Resolvidas:: [ Pedido ] Clicar na Imagem e expandir um texto
Permissões neste sub-fórum
Não podes responder a tópicos

BH Servers

Recomendamos a BH Servers com proteção DDOS gratuita em Cloud Server de alta performance. Entrega imediata.