Bubble

en javascript css tooltip publicado el 12 de octubre de 2006

Bubble es una librería JavaScript que permite mostrar "bocadillos" con una imagen al interior. El "bocadillo" se adapta al tamaño de la imagen y se puede cambiar su aspecto mediante css.

El código está inspirado de Lightbox JS de Lokesh Dhakar.

Como se usa

Bubble utiliza la librería Prototype.

Añadir estas líneas a la cabecera de la página:

<link href="styles/bubble.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="js/prototype.js"></script>
<script type="text/javascript" src="js/bubble.js"></script>

A continuación añadir una línea similar a esta en cada lugar que se quiera mostrar un "bocadillo". Para que el script se active, no hay que olvidar el rel="bubble".

<a href="/img/scriptaculous.jpg" rel="bubble"><img src="/img/bubble.png"/></a>
Descargar

FAQ

¿Puedo cambiar el aspecto del "bocadillo"?

Se puede cambiar el aspecto modificando el fichero bubble.css. Si las imágenes que forman el "bocadillo" no tuviesen el mismo tamaño que las originales se necesitará modificar algunos valores de configuración dentro del fichero bubble.js. Estos valores son:

  • La distancia en píxeles del borde a la punta del "bocadillo"
  • El margen derecho e izquierdo en píxeles de la imagen respecto a los bordes del "bocadillo"
  • El grosor en píxeles del borde de la imagen

Estos valores encuentran definidos el inicio del fichero bubble.js.

¿Sobre que código HTML se aplica el fichero bubble.css?

El código JavaScript añade dinámicamente las siguientes líneas al HTML:

<div id="bubble">
  <div class="Article">
    <div class="ArticleHeader" id="ArticleHeader"></div>
    <div class="ArticleBody" id="ArticleBody"></div>
    <div class="ArticleFooter" id="ArticleFooter">
      <div class="ArticleFooterBottomRight"></div>
    </div>
    <div class="ArticleFooterTail" id="ArticleFooterTail"></div>
  </div>
</div>

La imagen va dentro del tag ArticleBody.

¿Puedo usar Bubble en un proyecto comercial?

Si. La licencia es del tipo Creative Commons Reconocimiento 2.5. Básicamente, se puede copiar, distribuir y comunicar públicamente la obra; hacer obras derivadas; hacer un uso comercial de esta obra. En el caso de hacer obras derivadas, se debe distribuir bajo otro nombre.

Contacto

Para notificar cualquier bug o hacer cualquier pregunta envía un email a info@albertlanchas.com.

Igualmente agradecería que se me enviase la dirección de la página en la que se utiliza Bubble.

1 comentario

  • oscar

    12 de agosto de 2010

    Se puede utilizar este componente para mostrar texto, o una previsualización de otra página web?... gracias

Tags

¿Pensando en contratar mis servicios?

Lee esto

Algunos apuntes que te pueden resultar útiles:

  • Soy programador web y aunque me encantaría diseñar, no entra dentro de mis competencias. Para poder desarrollar una página web necesito el diseño gráfico final. Si no conoces a ningún diseñador te puedo recomendar alguno con el que haya colaborado y su trabajo me haya parecido bueno.
  • No soy especialista SEO, aunque uso reglas básicas y sentido común a la hora de estructurar el contenido lo que se traduce en una mejora en el posicionamiento.
  • Si es posible envíame toda la información que creas que necesite para presentarte un presupuesto. "Programar una web como esta" no es suficiente, no podré evaluar el coste porque no sabré que funcionalidades tiene. Necesito que me las especifiques.
  • Si el proyecto es de gran envergadura, seguramente que te pida cuál es tu presupuesto. La razón es que si se aleja mucho de lo que a primera vista considero puede costar, te contestaré enseguida que no es un trabajo que pueda hacer.
  • Si existe una fecha de entrega del proyecto, comunícamela. En función de mi disponibilidad te contestaré si es un trabajo que pueda hacer o no.

Para contactarme puedes usar el formulario de contacto.