JMiur [E]

En aext.net nos muestran dos formas de crear el efecto burbuja en los enlaces, es decir, que cuando coloquemos el cursor sobre un enlace con una imagen, esta se amplie. Entre ambos, me quedo con el de los sprites ya que es la técnica que me parece más adecuada y la que menos recursos requiere; sólo necesitamos una imagen y un poco de CSS.

En este ejemplo, esa imagen tiene 300x600 y es un rectángulo dividido en sectores de 150x150, por lo tanto cada imagen la podemos ubicar con un poco de aritmética.


Veamos el CSS:
#bubble { /* el contenedor que en este caso será una lista */
list-style: none;
margin: 0;
padding: 0;
}
#bubble li { /* cada item de esa lista */
display: inline-block; /* o usar float:left si se quiere que sea compatible con versiones anteriores a IE8 */
margin: 0;
padding: 0;
}
#bubble li a.icon { /* una clase general para los items, donde agregamos el sprite */
background: url(URL_imagen) no-repeat;
border: none;
display: block;
height: 150px; /* el alto de cada sector */
text-indent: -9999px; /* la ocultamos */
width: 150px; /* el ancho de cada sector */
}

/* ahora, posicionamos el fondo para cada item y para su efecto hover */

#bubble li a.demoBubble1 { background-position: -150px 0px; }
#bubble li a.demoBubble1:hover { background-position: 0px 0px; }

#bubble li a.demoBubble2 { background-position: -150px -150px; }
#bubble li a.demoBubble2:hover { background-position: 0px -150px; }

#bubble li a.demoBubble3 { background-position: -150px -300px; }
#bubble li a.demoBubble3:hover { background-position: 0px -300px; }

#bubble li a.demoBubble4 { background-position: -150px -450px; }
#bubble li a.demoBubble4:hover { background-position: 0px -450px; }
¿Cómo lo usamos? Creando una lista:
<ul id="bubble">
<li><a class="icon demoBubble1" href="javascript:void(0);">demoBubble1</a></li>
<li><a class="icon demoBubble2" href="javascript:void(0);">demoBubble2</a></li>
<li><a class="icon demoBubble3" href="javascript:void(0);">demoBubble3</a></li>
<li><a class="icon demoBubble4" href="javascript:void(0);">demoBubble4</a></li>
</ul>
Aunque siempre es mejor usar imágenes específicas, basta hacer cuentas para usar esta misma técnica y mostrar algo diferente. Por ejemplo, algo similar al llamado Sexy Bookmarks:


15 comentarios:

Bruno Máximo  

Muito legal esse efeito, vou testar no meu blog.
Eu adoro os seus posts :D
Parabêns!

Responder
[@nimes]  

wow, interesante efecto amigo jmiur, me gusto, espero poder ponerlo en mi blog :)

Responder
JMiur  

Gracias por comentar, Bruno :)

@nimes: Sí, es interesante y bastante simple, me parece que no tendrás problemas en implementarlo.

Responder
Graciela  

hay cuando hablas de matemáticas 'uyo' :P

Responder
Gem@  

Descubierto el secreto de los Sexy Bookmarks :P

Responder
javfanel  

maestro gracias por lo de la paginacion, estuvo execelente su ayuda

Responder
JMiur  

No es nada, javfanel.

Graciela: Apenas aritmética, sumar y restar :D

Gem@: Ningún secreto se puede guardar indefinidamente :D

Responder
Manuel Gimón  

Gracias por compartir tus conocimientos JMiur.
Estoy intentando aplicarlos en mi blog pero con un icono más, por lo que he hecho los sectores de 120x120 sobre un archivo de 240x600 (http://public.bay.livefilestore.com/y1pOkuNY943TrlxBuY87OVfW78HvAARuuXnPpTBGz44aAF8VuYv9ZRS5VhUCRIRpWC3i_ZfQF9jYsztzeuUcFOiKA/Indice.gif) y el código que he puesto lo puedes ver en el enlace de abajo, pero el resultado(http://fotopailon.blogspot.com/) no es el esperado. Porqué los dos primeros funcionan bien y a partir del tercero no?. En que he fallado? Por mas que me devano los sesos no hay manera.

CODIGO:
http://3zujlg.bay.livefilestore.com/y1pPqYKoAo3uq8BIoKWEUW2BATk7abmW087y4XTCF8Yto6w-v4GYJ4KfWbSYOLthaNTxxgzOGgpVAUmk0KRr6qefRPpIw2U7uwk/Codigo.txt

Responder
JMiur  

Primero que nada, en el código que me muestras en ese archivo de texto, la propiedad background con la imagen dice esto:

<a title="http://public.bay.livefilestore.com/y1pS0SAefFiCluh83o23zge0KjqQksBnr0Kjv8ZH1xnWBA1155A1hR59EeEtn1veam5j9OPoVY7PvSf_jNuqX9IYg/Indice.gif" href="http://public.bay.livefilestore.com/y1pS0SAefFiCluh83o23zge0KjqQksBnr0Kjv8ZH1xnWBA1155A1hR59EeEtn1veam5j9OPoVY7PvSf_jNuqX9IYg/Indice.gif">http://public.bay.livefilestore.com/y1pS0SAefFiCluh83o23zge0KjqQksBnr0Kjv8ZH1xnWBA1155A1hR59EeEtn1veam5j9OPoVY7PvSf_jNuqX9IYg/Indice.gif</a><a href="http://3.bp.blogspot.com/_hljKDuw-cxQ/SwwvwwO1qFI/AAAAAAAAOrI/x8tDZdD8tuQ/s00/cssbubble.gif%29">)</a>

lo que es un error, si la imagen es:

http://public.bay.livefilestore.com/y1pS0SAefFiCluh83o23zge0KjqQksBnr0Kjv8ZH1xnWBA1155A1hR59EeEtn1veam5j9OPoVY7PvSf_jNuqX9IYg/Indice.gif

la propiedad debería decir esto:

background: url(http://public.bay.livefilestore.com/y1pS0SAefFiCluh83o23zge0KjqQksBnr0Kjv8ZH1xnWBA1155A1hR59EeEtn1veam5j9OPoVY7PvSf_jNuqX9IYg/Indice.gif) no-repeat;

Por otro lado, si dices que el módulo utiliado es 120x120, deberás modificar la imagen ya que esta tiene 300x600 o sea, se basa en anchos de 150 pixeles y no de 120 lo 1que hace que pueda funcionar pero esos 30 de diferencia se van sumando.

En el código también veo que le falta la definición de:

#bubble li a.demoBubble5 {}

Responder
°•ஐ•°FrEdDy°•ஐ•°  

Muchas gracias JMiur por compartir este material, me funciona de maravilla apezar que lo adapte en mi plantilla Wordpress, gracias por ayudarme y enseñarme nuevas cosas...! :D

Responder
JMiur  

Gracias por el comentario.Me alegro que funcionara y sí, se adapta a cualqueir sitio web sin problema :)

Responder
Boris Vasquez  

Me gustan los ultimos que adaptaste al post, ojala que pueda ponerlos en mi web, espero no tenga problemas con esto

Responder
Boris Vasquez  

Yo quisiera el Css que utilizaste para hacer el ultimo,,,, plase ;)

Responder
JMiur  

Es el código que está en el post.

Responder
Boris Vasquez  

Pero segun tengo entendido utilizaste un border de 2px para el ultimo ejemplo verdad?

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