[Pedido] BBCode "Esconder/Mostrar"

[Gold Snake]

Qual a URL do seu fórum: http://www.finalfantasy.com.br/forumg2/
Tipo de Hospedagem: Free
Qual a versão do phpBB: 3.0.8
É um novo ou uma conversão: Não sei. =/
Usuário de teste: Usuário: Teste Senha: teste69
Estilos instalados: Elegance
Modificações instaladas: Nenhuma (ainda)
Qual seu nivel de experiência: Iniciante
Quando começou o problema: Desde sempre
Descreva seu problema: Quero criar uma BBCode de spoiler (aquelas que esconde e mostra o texto). Mas queria uma que ficasse igual aos comandos do meu fórum (link ai em cima). Reparem que ao colocar o mouse em cima de alguns comandos (como o de registrar), o preto fica vermelho. Queria fazer o mesmo efeito na BBCode. Basicamente, quero o seguinte:
Quando a pessoa postar usando a BBCode, o texto deve aparecer assim: e quando a pessoa colocar o mouse em cima dela, deve ficar assim: . Após clicar em "Mostrar", tem que aparecer a opção para "esconder", ficando assim: , e quando coloca o mouse em cima, fica assim: .

Alguém sabe como eu poderia criar algo assim?

[_Vinny_]

Gold Snake, você já pesquisou no fórum banco de dados de BBcodes? Já tem BBcode spoiller lá, basta fazer uma busca.

Aqui um exemplo: Me esconda. Me esconda. Me esconda É só personalizar do seu jeito.

[Gold Snake]

A base de como esconder o texto eu já sei. Mas gostaria de saber como personalizá-lo.

[_Vinny_]

Basta substituir os botões pelas imagens que postou. :)

[Gold Snake]

Tendo como base esse tópico, como ficaria os códigos com as urls das imagens que postei? Onde nesse código eu devo colocar as urls?

Código: Selecionar todos

<div style="margin:0px 0px 0px 0px">
<div class="smallfont" style="margin-bottom:0px">
<input type="button" value="Mostrar" style="width:75px;font-size:10px;margin:0px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = '';this.innerText = ''; this.value = 'Esconder'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerText = ''; this.value = 'Mostrar'; }">
</div>
<div style="margin: 0px; padding: 0px; border: 0px inset;">
<div style="display: none;">
{TEXT}
</div>
</div>

Abraço.

[Gold Snake]

Alguém poderia me ajudar nisso?

Obrigado.

[_Vinny_]

Talvez a MOD [RC1] Prime BBCode Spoiler (1.4.1) seja ideal para você conseguir o efeito desejado.

[robra]

Este BBcode está baseado no endereço das imagens que você postou em sua 1ª mensagem:

Código: Selecionar todos

<div style="display: block;">
<span onClick="if (this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display != '') {  this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = ''; this.innerHTML = '<img src=\'http://i.minus.com/jTG3cNrugGi71.png\' onMouseOver=this.src=\'http://i.minus.com/jbwOP5Dw8zqb5Q.png\' onMouseOut=this.src=\'http://i.minus.com/jTG3cNrugGi71.png\' onClick=\'return false;\' style=\'cursor: pointer;\'>'; } else { this.parentNode.parentNode.getElementsByTagName('div')[1].getElementsByTagName('div')[0].style.display = 'none'; this.innerHTML = '<img src=\'http://i.minus.com/jbfPnocJPaZGJb.png\' onMouseOver=this.src=\'http://i.minus.com/jdFTfsglmyIIV.png\' onMouseOut=this.src=\'http://i.minus.com/jbfPnocJPaZGJb.png\' onClick=\'return false;\' style=\'cursor: pointer;\'>'; }" /><img src="http://i.minus.com/jbfPnocJPaZGJb.png" style="cursor: pointer;" onmouseover="this.src='http://i.minus.com/jdFTfsglmyIIV.png'" onmouseout="this.src='http://i.minus.com/jbfPnocJPaZGJb.png'"></span>
<div class="quotecontent">
<div style="display: none;">{TEXT}</div>
</div>
</div>

Abraço.

[Gold Snake]

Deu certo! Muito obrigado Vinny e Robra pela ajuda. xD