Foros del Web » Creando para Internet » Diseño web »

Elemento HTML expandible para blog

Estas en el tema de Elemento HTML expandible para blog en el foro de Diseño web en Foros del Web. Bueno, ante todo les comento que es mi primer mensaje, y la duda que tengo no se si corresponde colocarla en esta seccion. Si me ...
  #1 (permalink)  
Antiguo 28/09/2008, 18:34
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 9 años, 2 meses
Puntos: 0
De acuerdo Elemento HTML expandible para blog (SOLUCIONADO)

Bueno, ante todo les comento que es mi primer mensaje, y la duda que tengo no se si corresponde colocarla en esta seccion. Si me equivoque en poner este mensaje aca, pido disculpas.
Ahora bien, mi duda es la siguiente...
Estoy trabajando en un blog el cual le estoy cambiando varias cuestiones sobre el diseño, y se me ocurrio reemplazar el elemento HTML que marca las etiquetas de lo publicado (que es la que viene por defecto en blogger) por un nuevo elemento HTML en el cual reemplace las etiquetas por imagenes las cuales contienen las direcciones que envian a una pagina determinada del blog.
Para que se entienda, cuando clickeamos en, por ejemplo, lo que seria por defecto un texto plano llamado "Musica" y como resultado me devuelve todas las entradas etiquetadas como "Musica", en su lugar ese texto plano llamado "Musica" esta reemplazado por un dibujo en forma de boton que dice "Musica" y que devuelve como resultado la muestra de todas las entradas etiquetadas con "Musica"
Lo que necesito, si es posible, utilizar la primera imagen de ese elemento HTML que seria el titulo "Todos Los Discos" y convertirlo en boton para expandir o contraer el resto del contenido del elemento, que serian todas las imagenes que reemplazan los textos planos que llevan a mostrar las entradas con la respectiva etiqueta.

Dejo una imagen para mostrar como esta en mi blog



Espero que alguien me pueda ayudar con esta duda.

Saludos y gracias!!!

Última edición por mdrgz; 02/10/2008 a las 20:49 Razón: SOLUCIONADO
  #2 (permalink)  
Antiguo 28/09/2008, 22:10
 
Fecha de Ingreso: septiembre-2008
Mensajes: 64
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: Elemento HTML expandible para blog

Buenas!! eso es muy fácil de lograr solo hace falta un código javascript y un div :D

El funcionamiento es el siguiente: creas un div donde pones lo que quieres mostrar u ocultar apretando un link y le das el atributo visibility:hidden para que esté oculto desde el principio y luego creas un link que llame a una función javascript para cambiar el hidden a visible...


DIV:

<div id="oculto" style="visibility:hidden">


Código javascript (poner en el header de la página):

<script type="text/javascript">
function ver_div(id){
document.getElementById(id).style.visibility=(docu ment.getElementById(id).style.visibility=="hidden" ?"visible":"hidden");
}
</script>

LINK:

<a href="javascript:ver_div('oculto')">en código de la imagen aqui</a>



Para mostrar u ocultar otro div lo unico que tienes que hacer es cambiar donde dice "oculto" en el link y el div...

por ej:
<div id="hola" style="visibility:hidden">
<a href="javascript:ver_div('hola')">en código de la imagen aqui</a>



espero que te sirva :)
  #3 (permalink)  
Antiguo 29/09/2008, 08:00
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Elemento HTML expandible para blog

Gracias Nazareno59 por la ayuda, pero te comento que no lo pude comprender. Quizas estoy haciendo algo mal y no me doy cuenta.

Te cuento lo que hice:

Primero inserte el javascript en la plantilla del blog justo antes de </head>

Luego me fui al diseño de la pagina donde se insertan los elementos, y abri el elemento donde tengo todas las imagenes que quiero ocultar y mostrar.

La primera imagen, que seria "Todos Los Discos" como muestra la foto de arriba, es la que usaria en forma de link para llamar a al funcion javascript de ocultar-mostrar.

<a href="javascript:ver_div('oculto')">en código de la imagen aqui</a>

Modificando la parte EN CODIGO DE LA IMAGEN AQUI queda asi:

<a href="javascript:ver_div("><img border="0" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/TODOSLOSDISCOS.gif"/></a>

Hasta ahi, todo perfecto, pero no puedo seguir adelante ya que no entiendo como usar el DIV, o sea, yo tengo esto:

<div id="oculto" style="visibility:hidden">

Pero ¿donde tendria que colocar esto que seria uno de los botones ocultos junto al link que llama al explorer a redireccionar?:

<a href="http://www.agendarockera.blogspot.com/" target="_blank"><img alt="" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/2MINUTOS.gif" border="0" /></a>


Por otro lado, te cuento que tampoco comprendo si hay que hacer esto por cada boton que quiero mostrar-ocultar o esta funcion sirve para todo el contenido de mi elemento, porque son unos 20 mas o menos.

Espero que entiendas lo que trato de explicarte.

Saludos y nuevamente gracias por la ayuda!!!

Última edición por mdrgz; 29/09/2008 a las 16:51
  #4 (permalink)  
Antiguo 29/09/2008, 17:25
 
Fecha de Ingreso: septiembre-2008
Mensajes: 64
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: Elemento HTML expandible para blog

hola! perdón si no te explique muy claramente es que también soy nuevo aqué :)

en primer lugar, el link para mostrar y ocultar las otras imágenes debería ser:

Cita:
<a href="javascript:ver_div('NOMBRE_DEL_DIV')"><img border="0" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/TODOSLOSDISCOS.gif"/></a>
el div se usa para ENCERRAR el contenido que quieres mostrar u ocultar, por ejemplo:

Cita:
<div id="NOMBRE_DEL_DIV" STYLE="visibility:hidden">

<a href="http://www.agendarockera.blogspot.com/" target="_blank"><img alt="" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/2MINUTOS.gif" border="0" /></a>
<a href="http://www.agendarockera.blogspot.com/" target="_blank"><img alt="" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/2MINUTOS.gif" border="0" /></a>
<a href="http://www.agendarockera.blogspot.com/" target="_blank"><img alt="" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/2MINUTOS.gif" border="0" /></a>
<a href="http://www.agendarockera.blogspot.com/" target="_blank"><img alt="" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/2MINUTOS.gif" border="0" /></a>

</div>
*como verás, tienes que poner TODOS los elementos a ocultar dentro del mismo div...

fíjate bien que tienes que abrir y cerrar la etiqueta o no funcionará :)

un consejo: si las imágenes las tienes en el mismo lugar que el archivo html te recomiendo usar links mas cortos, por ejemplo si tienes index.html en el directorio /pagina y tienes las imágenes en el directorio /pagina/imagenes con poner src="imagenes/imagen.jpg" bastará... Eso te ahorra tiempo y es bastante útil si algún día cambias de servidor ya que no tendrías que modificar todos los links!

espero que te sirva :)
  #5 (permalink)  
Antiguo 29/09/2008, 18:00
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Elemento HTML expandible para blog

Bueno, Nazareno, graciaspor la explicacion y no te hagas drama si no me lo explicaste bien (son cosas que pasan...)

Te cuento lo que hice:

1 - Esto pegado justo antes de </head>

<script type='text/javascript'>
function ver_div(id){
document.getElementById(id).style.visibility=(docu ment.getElementById(id).style.visibility==&quot;hi dden&quot; ?&quot;visible&quot;:&quot;hidden&quot;);
}
</script>

2 - Esto dentro del elemento HTML donde ya estaban todas las imagenes

<a href="javascript:ver_div("><img border="0" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/SITIOSQUERECOMIENDO.gif"/></a>

<div id="SITIOSQUERECOMIENDO" style="VISIBILITY: hidden">

<a href="http://www.agendarockera.blogspot.com/" target="_blank"><img border="0" alt="" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/AGENDAROCKERA.gif"/></a>
<a href="http://malinamaniac.blogspot.com/" target="_blank"><img border="0" alt="" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/MALINAMANIAC.gif"/></a>

</div>

3 - Una vez guardados los cambios, veo en mi blog solo la primer imagen que seria la que tiene el link para ejecutar las funciones mostrar-ocultar (justamente asi tiene que ser), pero cuando le doy click a esa imagen, no se muestra nada.
Ademas en mi navegador (IE7) me da "Listo pero con errores en la pagina"

Ya no se que puede ser, o sea, no se me ocurre cual es el error.

Perdoname si te jodo con esto, pero siento que ya estamos a un pasito de poder solucionarlo.

Ademas, tengo otro elemento HTML para hacer lo mismo, entonces deberia poner otra vez

<script type='text/javascript'>
function ver_div(id){
document.getElementById(id).style.visibility=(docu ment.getElementById(id).style.visibility==&quot;hi dden&quot; ?&quot;visible&quot;:&quot;hidden&quot;);
}
</script>

para ese otro elemento, o con el que va para el primero es suficiente?

Muchisimas gracias!!!
  #6 (permalink)  
Antiguo 29/09/2008, 20:04
 
Fecha de Ingreso: septiembre-2008
Mensajes: 64
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: Elemento HTML expandible para blog

el problema es que esta mal escrito el link de la imagen que debería mostrar el resto je..

en lugar de:

<a href="javascript:ver_div("><img border="0" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/SITIOSQUERECOMIENDO.gif"/></a>

deberías poner:

<a href="javascript:ver_div('SITIOSQUERECOMIENDO')><i mg border="0" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/SITIOSQUERECOMIENDO.gif"/></a>

espero que ahora si funciona!! ;)
  #7 (permalink)  
Antiguo 30/09/2008, 07:32
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Elemento HTML expandible para blog

Nazareno, reemplazando como decis en el ultimo mensaje, sigue sin funcionar. Si te sirve de algo te comento que cuando me paro con el cursor sobre la primer imagen que es la que contiene el link para ejecutar la funcion javascript, veo en la parte inferior izquierda de mi browser lo siguiente JAVASCRIPT:VER_DIV(

Ademas, si pongo

<a href="javascript:ver_div('SITIOSQUERECOMIENDO')><i mg border="0" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/SITIOSQUERECOMIENDO.gif"/></a>

y hago una vista previa, veo que el script cambia a

<a href="javascript:ver_div("><img src="http://i258.photobucket.com/albums/hh244/marcelodrgz/SITIOSQUERECOMIENDO.gif" border="0" /></a>

Estara faltando algo o yo sigo haciendo las cosas mal?

Saludos
  #8 (permalink)  
Antiguo 30/09/2008, 11:50
 
Fecha de Ingreso: septiembre-2008
Mensajes: 64
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: Elemento HTML expandible para blog

oh xD

bueno la razón por la cual cuando pones el cursor encima del link ves en la barra del browser javascript:VER_DIV( es que estás terminando antes la etiqueta, osea poniendo " en lugar de '...

que programa usas para editar las páginas?

intenta abrir el archivo .html con el Notepad de windows y cambia el link por:

<a href="javascript:ver_div('SITIOSQUERECOMIENDO')><i mg border="0" src="http://i258.photobucket.com/albums/hh244/marcelodrgz/SITIOSQUERECOMIENDO.gif"/></a>

creo que el problema es que el programa que utilizas cambia los ' por " :)

espero que ahora si funcione! :D
  #9 (permalink)  
Antiguo 30/09/2008, 19:34
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Elemento HTML expandible para blog

Nazareno, uso el mismo editor de Blogger, y nunca he tenido problemas con otros script que tengo insertados en el blog.

Descargue la plantilla y la edite con Notepad como me recomendaste, pero la funcion javascript no anda. Solo aparece la imagen que contiene el link para ejecutar la funcion pero al hacer click me da error en el browser.

Dejo el tread abierto por si existe otra solucion o alguna alternativa para poder realizar los cambios que necesito hacer en el blog.

Yo voy a buscar ayuda en otros lugares y si encuentro algo que funcione, pongo la solucion aca.

De todas maneras, muchisimas gracias Nazareno por el tiempo que me dedicaste.

Saludos!!!
  #10 (permalink)  
Antiguo 30/09/2008, 19:36
 
Fecha de Ingreso: septiembre-2008
Mensajes: 64
Antigüedad: 9 años, 3 meses
Puntos: 2
Respuesta: Elemento HTML expandible para blog

:( que raro yo uso ese sistema en mi blog y me anda bien xD

de nada :)
  #11 (permalink)  
Antiguo 01/10/2008, 15:27
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Elemento HTML expandible para blog

Ok, Nazareno, gracias por la ayuda.

Es una lastima que no pueda hacer lo que quiero con estos botones.

Si a alguien se le ocurre otra solucion, se lo voy a agradecer.

Última edición por mdrgz; 02/10/2008 a las 20:33
  #12 (permalink)  
Antiguo 02/10/2008, 20:44
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 9 años, 2 meses
Puntos: 0
De acuerdo Respuesta: Elemento HTML expandible para blog

Bueno, finalmente encontre la solucion es la seccion JAVASCRIPT de este mismo foro.

Antes de la solucion, quier agradecer a NAZARENO59 y a DAVID EL GRANDE por la ayuda recibida

Acá les dejo la solucion:

ESTO EN LA PLANTILLA ANTES DE </HEAD>


<script type='text/javascript'>
function ver_div(id){
document.getElementById(id).style.visibility=(docu ment.getElementById(id).style.visibility=='hidden' ) ? 'visible':'hidden';
}
</script>


ESTO DENTRO DEL ELEMENTO AL QUE QUIERO HACER EL EFECTO


<a href="javascript:ver_div('ENTRADAS')><img border="0" src="http://mi-seridor-de-imagenes/imagen.gif"/></a>

<div id="ENTRADAS" style="VISIBILITY: hidden">

<a href="http://mi-web.com/search/label/ENTRADAS%20NUEVAS"><img border="0" alt="" src="http://mi-servidor-de-imagenes/imagen1.gif"/></a>
<a href="http://mi-web.com/search/label/ENTRADAS%20ANTIGUAS"><img border="0" alt="" src="http://mi-servidor-de-imagenes/imagen2.gif"/></a>

</div>

Bueno, espero que la solucion les sirva a muchos como me sirvio a mi.

SALUDOS!!!

Última edición por mdrgz; 02/10/2008 a las 20:48 Razón: SOLUCIONADO
  #13 (permalink)  
Antiguo 03/10/2008, 15:16
 
Fecha de Ingreso: septiembre-2008
Mensajes: 14
Antigüedad: 9 años, 2 meses
Puntos: 0
Respuesta: Elemento HTML expandible para blog

Acá dejo otra forma de hacer lo mismo, aunque la diferencia es que al hacer click sobre la imágen que contiene la función, el contenido se "EXPANDE y CONTRAE" a diferencia del anterior que solo "OCULTA y MUESTRA"

Cita:
Iniciado por mdrgz Ver Mensaje
Gracias por la "semi-ayuda", David el Grande

Finalmente seguí tu consejo y busqué info en otra web (vagabundia.blogspot.com/2008/01/sidebar-explicada.html) y logré crear el efecto que quería pero con otro script.

Dejo un resumen de la explicación por si alguien está buscando ayuda con este tema:

...Sólo necesitamos un poco de CSS y un pequeño script que agregamos en la plantilla antes de </head> y que nos permite permutar la propiedad de un elemento entre dos estados, oculto y visible, cambiando la propiedad display.


ESTO ANTES DE </HEAD>

<style type='text/css'>
.elementoVisible {display:block;}
.elementoOculto {display:none;}
.linkContraido {
... propiedades de estilo para fuentes o imágenes ...
}
.linkExpandido {
... propiedades de estilo para fuentes o imágenes ...
}
</style>

<script type='text/JavaScript'>
function desplegarContraer(cual,desde) {
var elElemento=document.getElementById(cual);
if(elElemento.className == 'elementoVisible') {
elElemento.className = 'elementoOculto';
desde.className = 'linkContraido';
} else {
elElemento.className = 'elementoVisible';
desde.className = 'linkExpandido';
}
}</script>


La idea es sencilla, tenemos dos bloques DIV; en uno hay un enlace y en el otro el contenido a mostrar/ocultar. El enlace tiene, por defecto la clase linkContraido y el contenido, la clase elementoOculto. Cuando hacemos click en el enlace, el script cambia las clases de ambos, es decir, sus propiedades. El enlace será de la clase linkExpandido y el contenido de la clase elementoVisible. De esta manera, en un solo paso hacemos visible el contenido y podemos cambiar la forma de ver el enlace.

Supongamos que estas son las propiedades del enlace:

.linkContraido {color: blue;}
.linkExpandido {color: red;}

Se mostrará en color azul. Cuando hacemos click, se pondrá rojo y se mostrará el contenido. Lo mismo podemos hacer cambiando la imagen de fondo

Lo implementamos creando un elemento HTML y escribiendo el código necesario. Esquemáticamente:

ESTO DENTRO DEL ELEMENTO HTML QUE CONTIENE LOS OBJETOS A LOS QUE QUEREMOS APLICAR EL EFECTO

<div class="linkContraido" onclick="desplegarContraer('contenedorExterno',thi s);">ENLACE</div>
<div id="contenedorExterno" class="elementoOculto">
<div>.... el contenido interno ...</div>
</div>

ADEMÁS PODEMOS IR UN PASO MÁS ALLÁ...

Podemos anidar elementos ocultos con facilidad, agregando enlaces y elementos ocultos en los contenidos:

<div class="linkContraido" onclick="desplegarContraer('contenedorExterno',thi s);">ENLACE 1</div>
<div id="contenedorExterno" class="elementoOculto">

<div class="linkContraido" onclick="desplegarContraer('contenedorInterno_1',t his);">ENLACE 2</div>
<div id="contenedorInterno_1" class="elementoOculto">
<div>... el contenido 1 ...</div>
</div>

<div class="linkContraido" onclick="desplegarContraer('contenedorInterno_2',t his);">ENLACE 3</div>
<div id="contenedorInterno_2" class="elementoOculto">
<div>... el contenido 2 ...</div>

<div class="linkContraido" onclick="desplegarContraer('contenedorInterno_3',t his);">ENLACE 4</div>
<div id="contenedorInterno_3" class="elementoOculto">
<div>... el contenido 3 ...</div>

</div>
</div>

</div>

Última edición por mdrgz; 03/10/2008 a las 19:29
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 00:41.