26 marzo 2008

CÓDIGO EXPANDIR (TEXTO O IMÁGENES)


Éste código es de los que más me gustan además de que lo considero muy útil para determinados casos.

Se trata de un código que permite haciendo click en una imágen o texto expandir una parte que permanece oculta, ya sea para que el post no sea demasiado largo o porque no queramos que todo esté a la vista.

Puede usarse para listas de links en nuestro sidebar, o para otros usos.

Click en la siguiente imagen para ver un ejemplo implantado en MALINA MANIAC.

Ver otro ejemplo dentro de un post

Aquí la explicación del codigo:

Consta de 2 partes, la primera para debe ser colocada en la plantilla (sólo será necesario una vez). La segunda parte la colocaremos en cualquier entrada o elemento html donde lo queramos implantar.

EN LA PLANTILLA: antes de </head>:


<style type="text/css">.texthidden {display:inline}.shown {display:block}</style><script type="text/javascript">document.write('<style>.texthidden {display:none} </style>');</script><script type="text/Javascript">function expandcollapse (postid) {whichpost = document.getElementById(postid);if (whichpost.className=="shown") {whichpost.className="texthidden";}else {whichpost.className="shown";}}</script>


EN LA ENTRADA O ELEMENTO HTML:

<div style="text-align: left;">

<a href="javascript:void(0);" onclick="expandcollapse('NOMBRE UNICO')">

<img src="URL IMAGEN" /></a> </div>

<div id="MISMO NOMBRE UNICO" class="texthidden">

ENTRE ESTAS ETIQUETAS DIV COLOCAR TODO EL HTML DE LO QUE PERMANECERÁ OCULTO.

</div>


Visto en :: lablogueria

1 comentarios:

Anónimo dijo...

Muchas gracias.. excelente codigo

Publicar un comentario

Hola, por favor se amable, deja tu nombre y si necesitas respuesta suscribete al comentario ya que te responderé aquí mismo.

@>-,´-: MaLiNa

 

Copyright 2008 | Design by Somos Marca