Bubble

en javascript css tooltip publicat el 12 de d'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 d'agost de 2010

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

Pensant en contractar els meus serveis?

Llegeix això;

Alguns apunts que et poden resultar útils.

  • Soc programador web i encara que m'encantaria dissenyar, no entra dins de les meves competències. Per poder desenvolupar una pàgina web necessito el disseny gràfic final. Si no coneixes a cap dissenyador puc recomanar-te'n algun amb el que hagi col·laborat i la seva feina m'hagi semblat bona.
  • No soc especialista SEO, encara que faig servir regles bàsiques i sentit comú a l'hora d'estructurar el contingut el que es tradueix amb una millora en el posicionament.
  • Si es possible, envia'm tota la informació que creguis que necessito per preparar-te un pressupost. "Programar una web com aquesta" no es suficient, no podré avaluar el cost per que no sabré quines funcionalitats te. Necessito que les especifiquis.
  • Si el projecte es de gran envergadura, segurament que et demani quin es el teu pressupost. La raó es que si s'allunya molt del que a primera vista considero pot costar, et contestaré de seguit que no es un treball que pugui fer.
  • Si existeix una data d'entrega del projecte, comunica-me-la. En funció de la meva disponibilitat et contestaré si es un treball que pugui fer o no.

Per contactar-me pots utilitzar el formulari de contacte.