Spoiler para enlaces

magiccen Seguir

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
27 Ene 2008
Mensajes
47
Saludos amigos, he visto navegando por la web, en una comunidad usan un spoiler, creo que eso es, que oculta los enlaces con una imagen, al darle click los muestra y con otro click los oculta (Clic en la imagen para ver y ocultar los enlaces), alguien sabe cómo se hace para vbulletin 4.2.1?
Gracias por las respuestas que puedan brindarme.
 

magiccen

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
27 Ene 2008
Mensajes
47
Muchas gracias por tu respuesta Eduardo Leon, el Add On ya no funciona para vb4.2.1, el BBCode ya lo había instalado pero deja un botón donde clickar, yo deseaba una imagen la cual al darle click muestre los enlaces y los oculte al darle otro click.
Yo no sé nada de php ni de algún otro lenguaje de programación, pero de tanto instalar o modificar plantillas según las indicaciones como que algo se aprende o al menos se desarrolla cierta intuición.
Intenté manipular el código del spoiler que tan amablemente dejas (Spoiler tags... or any tags? - vBulletin Community Forum ) eliminando y agregando me quedó esto:

PHP:
<div id="spoiler"><div><input type="image" src="http://www.magicdown-center.com/images/editor/descarga.png" value="Show Spoiler!" style="width:400px;font-size:12px;margin:10px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Hide Spoiler!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Show Spoiler!'; }" />
<div id="show" style="image; display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-style:solid;border-width:1px; padding: 4px; width:98%">
{param}</div>
<div id="hide"></div></div></div>

Cuando le doy vista previa todo muy bien, un click muestra enlaces, otro click los oculta, pero cuando le doy guardar los cambios, doy un click y muestra los enlaces pero a los segundos sale un mensaje : "Aviso del foro La acción especificada es inválida"
Qué código hace que esto suceda, le he dado vuelta mil veces y no logro "ver" la causa, como digo yo no sé nada de php y por eso espero que me echen una mano, ustedes que son expertos en esto y cuando quede bien lo puedan usar los demás compañeros que al igual que yo andan buscando este tipo de spoiler.
Nuevamente las gracias por la ayuda que puedan darme.
 

magiccen

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
27 Ene 2008
Mensajes
47
Bueno en vista que nadie obtuvo algún resultado del que busco les dejo los códigos de cómo me quedó el spoiler luego de tanto y tanto probar:
http://i.imgur.com/O1mG1Bt.jpg
http://i.imgur.com/QhgCLMz.jpg

PHP:
<tr><td class="$bgclass"><div align="center"><img src="/images/editor/descarga.png"/></td></tr> 
<div id="spoiler"><div> <input type="button" value="Click para ver!" style="width:100px;font-size:12px;margin:10px;padding:0px;" onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = 'Click para ocultar!'; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = 'Click para ver!'; }" />
<div id="show" style="background-image; display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-style:solid;border-width:1px; padding: 4px; width:98%">
{param}</div>
<div id="hide"></div></div></div>

Claro que no es lo que buscaba, pero sirve de momento, lo ideal es que solo se vea la imagen y ahí se de click para aparecer y desaparecer los enlaces.
Luego de esto quizá se animen a buscarle la solución que deseo.
Un abrazo amigos.
 

4ngeluxpunk

Zeta
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Ago 2009
Mensajes
1.735
Buenas amigo el código sería así:


Insertar CODE, HTML o PHP:
<style type="text/css" media="all">
#boton { background:url('http://i.imgur.com/igeOfqy.png?1') no-repeat; border:none;  width:309px; height:80px;}
</style>


<center>
<div id="spoiler"><div><input type="button" id="boton" value="         " onclick="if (this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display != '') { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = ''; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = 'none'; this.innerText = ''; this.value = '          '; } else { this.parentNode.parentNode.getElementsByTagName('div')['show'].style.display = 'none'; this.parentNode.parentNode.getElementsByTagName('div')['hide'].style.display = ''; this.innerText = ''; this.value = '          '; }" />
<div id="show" style="background-image:url(http://i.imgur.com/yPBZbei.png?1); display: none; background-color:transparent; background-repeat:repeat; margin: 0px;border-style:solid;border-width:1px; padding: 4px; width:98%">
{param}</div>
<div id="hide"></div></div></div>
</center>

Bueno amigo espero que se de tu agrado. Puedes ver como queda:

rEnkh0J.png


cNCZ47m.png
 

magiccen

Beta
¡Usuario con pocos negocios! ¡Utiliza siempre saldo de Forobeta!
Desde
27 Ene 2008
Mensajes
47
Quedó fantástico!!!, aunque solo un pequeñísimo detalle:
3HWuuVV.jpg


Si se eliminaran las letras cuando se da click sería genial y una curiosidad, porque no funciona igual cuando se pone un enlace interno de la imagen, es decir desde una dirección del host (se ve cierta repeticion en la caja de enlaces y recorta la imagen principal lo que no se ve cuando se pone un enlace externo)
De todas maneras quedo muy agradecido y satisfecho 4ngeluxpunk.
Un abrazo
 

4ngeluxpunk

Zeta
Programador
Verificación en dos pasos activada
Verificado por Whatsapp
¡Ha verificado su Paypal!
Desde
22 Ago 2009
Mensajes
1.735
Te refieres a la parte que dice Show Spoiler, para que no salga eso es solo de borrar la parte que dice value="Show Spoiler!" pero en el código que te pase esta en blanco osea que no sale, raro que te salga a tí. Y con tu curiosidad no entendí muy bien lo preguntado.
 
Arriba