JMiur [E]

Me preguntaron si era posible usar un efecto similar al que se ve en páginas como Twitter, es decir, que ciertos íconos o enlaces permanezcan ocultos hasta que ponemos el mouse encima de cierta área:



Esto es posible reproducirlo con bastante facilidad, la estructura del código HTML sería algo así:
<div class="recuadroC">
... lorem ipsum dolor sit amet ...
<span class="iconos">
<div>
<a href="laQueQueremosHacer" class="enlaceIco"> </a>
</div>
</span>
</div>
En resumen, un bloque DIV con cualquier contenido, dentro el cual colocamos una etiqueta SPAN y otro bloque DIV con los íconos que servirán de enlaces. La clave de todo está en las definiciones CSS. Un par de ejemplos:

Fusce augue? Fusce magna. In mi. Etiam aliquet porttitor ligula. Curabitur auctor ultricies lectus. Donec placerat. Pellentesque convallis quam sit amet diam! Curabitur lectus. Duis rutrum placerat leo. Fusce euismod nibh sit.

Fusce augue? Fusce magna. In mi. Etiam aliquet porttitor ligula. Curabitur auctor ultricies lectus. Donec placerat. Pellentesque convallis quam sit amet diam! Curabitur lectus. Duis rutrum placerat leo. Fusce euismod nibh sit.

<style>
.recuadroC { /* el bloque */
cursor: pointer;
padding: 10px 30px 10px 10px; /* el contenido no debe ocupar todo el bloque */
position: relative; /* esta es la propiedad clave */
width: valorpx;
}
.recuadroC .iconos { /* el bloque del SPAN */
position: absolute; /* lo ubicamos dentro del DIV */
right: 5px; /* lo ponemos a la derecha */
top: 5px; /* los valores pueden ser otros */
}
.recuadroC a { /* los enlaces serán imágenes */
background: transparent url() no-repeat 50% 50%;
display: block;
height: valorpx; /* el alto de la imagen */
visibility: hidden; /* lo hacemos invisible */
width: valorpx; /* el ancho de la imagen */
}
.recuadroC a.enlaceIco { /* es la imagen */
background-image: url(URL_imagen);
}
.recuadroC:hover {
/* cualquier propiedad */
}
.recuadroC3:hover a.enlaceIco { /* cuando ponemos el mouse encima */
visibility: visible; /* lo hacemos visible */
}
</style>

Este es un ejemplo concreto ...

15 comentarios:

Manuel de la Fuente  

Oh, me encantó, luce bastante bien.

Responder
Graciela  

qué bello, explicas maravillosamente, mi pregunta es cómo lo logras???, no responda JM :X :P, tiene un cerebro activo, usted no padecerá ninguna enfermedad en su vejéz :D

Responder
Gem@  

!!Me adivinaste el pensamiento!! yo tengo el footer desplegable pero quería algo diferente, lo pusiste en bandeja ¡Gracias!

Responder
NeneLand  

Hola amigos. Pido disculpas, se que este no es el post relacionado en el que deberia dejar el comentario, pero es que no encontre el original que en su dia lei. Habia leido por aqui que como solucion provisional al tema de los scripts en blogger podiamos user Google Sites y cambiar la extension JS por TXT (o incluso en blanco). Lo he probado en mi blog, pero en Internet Explorer no me funciona. Si funciona bien en Chrome o Firefox, pero en IE me da un error de carga de pagina y no funciona. ¿Hay algun truco adicional para solucionar esto o no me queda mas remedio que incluir el script en la plantilla (por ahora no me gustaria para no liarla mas aun)?
Gracias y perdon por el off-topic

Responder
Espineli  

Simplemente espectacular. La verdad es que me había fijado en los tweets del twitter, pero no sabía que se podía hacer en blogger. Saber que se puede aplicar es bastante reconfortable.
Salu2.

Responder
Ciberwing  

Un div no puede estar dentrode span

block !inside inline

Responder
Gem@  

J.Miur ¿qué le pasa a tus últimas entradas de la sidebar, ayer pensaba que era cosa de la carga pero hoy tampoco las veo.

Responder
JMiur  

Graciela: tengo una enorme botella de formol preparada para cuando llegue ese momento.

NeneLand: El problema allí podría ser Google Sites, un sistema que no conozco, uso Fileden y no veo problemas con las extensiones en ningún navegador ¿Por qué no pruebas subiendo uno de esos TXTs a Fileden a ver que ocurre?

Espinelli: Me alegro que le guste la idea :)

Gem@: No veo problemas en ese gadget ¿Habrá sido un problema circunstancial?

Ciberwing: Como puede verse en el ejemplo SI, se puede, sino, no funcionaría en ningún navegador. Si te refieres a "validaciones" no creo en reglas inútiles, abstractas ni caprichosas, sólo creo en que las páginas web deben verse bien y funcionar en los navegadores; el resto, se lo dejo a los fundamentalistas.

Responder
NeneLand  

Demasiado tarde JMiur (jejejeje, es broma) termine por hacerte caso y he puesto los JS y los CSS en la misma plantilla. Me daba algo de pereza, pero al final me he decidido ... Gracias mil por tu ayuda, de verdad, eres genial.

Responder
Shark_Bloody  

De todos modos se podria presindir de la etiqueta SPAN. La diferencia con la etiqueta DIV, si no me equivoco, esta en las propiedades por defecto que el navegador le adjunta.

En realidad es para ahorrar trabajo a la hora de dar el estilo. :P

La verdad que lo que mas valoro es la imaginacion, porque mientras el navegador interprete bien lo que programamos no hay problema.

Ah, el ultimo ejemplo esta buenisimo. (el de los perros) :D

Responder
JMiur  

Ahhh pués has elegido la mejor solución, NeneLand :D

Responder
Antony  

Me gusta mucho este efecto. ;) Voy a probarlo... :) Saludos! :D

Responder
Deybi  

Esto es bonito y muy elegante. Hace del blog un lugar muy acogedor. Me encantan los especios con pasadizos y cosas escondidas.

Saludos :D.

Responder
Mamots  

Hola, perdona mi ignorancia, pero me gustaria saber como hiciste lo del final.
El efecto sobre las imagenes (hover) si lo entendi bien, gracias.
pero este (me refiero al final que es el que mas me gusta) nada, no se, me lo podrias explicar?

saludos
quizas hasta este mas claro que el agua.

Responder
JMiur  

Pués es el código que está en el post, justamente.

Responder

¿Quiere dejar un comentario?

recuerde que los comentarios están siendo moderados y serán publicados a la brevedad ...

Todos los archivos y demos alojados en Fileden han sido redireccionados y deberían estar funcionando correctamente.
De todos modos, también puede accederse a ellos a través de SkyDrive

Nota: sólo los miembros de este blog pueden publicar comentarios.

Si le gusta ir a lo seguro utilice este botón para abrir los comentarios en una ventana modal en esta misma pagina.

Si añora tiempos idos, use este enlace para agregar un comentario al viejo estilo ...

 
CERRAR