Speech Bubble Plugin Module for the
overlibmws DHTML Popup Library
 
maintained by Foteos Macrides at Macrides Web Services
Discuss these examples, seek help, and offer suggestions
for BUBBLE support via the
overlibmws Support Group.


1. Introduction
 

This document has examples of speech bubble popups equivalent to those in the primary BUBBLE support document, as well as in the first and second BUBBLE supplements, and a square metallic example.  It includes the pre-init string and array variable definitions:

OLbubbleImageDir='bubble';

var OLbubbleImageSet=
   'flower,oval,square,pushpin,quotation,'
+'flower_ddeeff,oval_ddeeff,square_ddeeff,pushpin_ddeeff,quotation_ddeeff,'
+'flower_fcfeff,oval_fcfeff,square_fcfeff,pushpin_fcfeff,quotation_fcfeff,'
+'square_metallic,'
+'roundcorners,roundcorners_ddeeff,roundcorners_fcfeff';

var OLimgWidth=[250,330,144,202,200,250,330,144,202,200,250,330,144,202,200,300];
var OLimgHeight=[150,160,190,221,66,150,160,190,221,66,150,160,190,221,66,380];
var OLcontentWidth=[200,250,130,184,190,200,250,130,184,190,200,250,130,184,190,280];
var OLcontentHeight=[80,85,150,176,46,80,85,150,176,46,80,85,150,176,46,320];
var OLpadLeft=[30,40,7,9,5,30,40,7,9,5,30,40,7,9,5,12];
var OLpadTop=[25,48,10,34,4,25,48,10,34,4,25,48,10,34,4,14];
var OLarwTipX=[180,50,51,9,19,180,50,51,9,19,180,50,51,9,19,106];
var OLarwTipY=[148,5,180,221,64,148,5,180,221,64,148,5,180,221,64,370];

var OLbubbleImages=
   'flower,oval,square,pushpin,quotation,'
+'flower_ddeeff,oval_ddeeff,square_ddeeff,pushpin_ddeeff,quotation_ddeeff,'
+'flower_fcfeff,oval_fcfeff,square_fcfeff,pushpin_fcfeff,quotation_fcfeff,'
+'square_metallic,'
+'roundcorners,roundcorners_ddeeff,roundcorners_fcfeff';


in a script block before those for importing the overlibmws modules, so that all the of bubble images, located in a bubble subdirectory and having different background colors (the default set of #ffffdd, versus the #ddeeff and #fcfeff sets, and the metallic image) can be used within this document.  See the Speech Bubbles section of the Command Reference for more information about these variables.

2. Examples
 

The following examples illustrate each of the "bubble" image types that have been made available within this document.  The bold lettering below each link shows the overlib call to invoke it.  The second call is the same except that the ADJBUBBLE command has been added.  The flower examples use the following style rule for the text:
  .comic20 {font-family:'Comic Sans MS'; font-size:20px;}

  • flower bubble        adjust bubble size
    overlib('This is a <b>flower</b> bubble popup.',
     BUBBLE, TEXTFONTCLASS, 'comic20')
  • flower_ddeeff bubble        adjust bubble size
    overlib('This is a <b>flower</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'flower_ddeeff', TEXTFONTCLASS, 'comic20')
  • flower_fcfeff bubble        adjust bubble size
    overlib('This is a <b>flower</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'flower_fcfeff', TEXTFONTCLASS, 'comic20')
  • oval bubble        adjust bubble size
    overlib('This is an <b>oval</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'oval', TEXTSIZE, 2, FILTER, FILTERSHADOW,1,
     FILTERSHADOWCOLOR,'#60b0ff')
  • oval_ddeeff bubble        adjust bubble size
    overlib('This is an <b>oval</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'oval_ddeeff', TEXTSIZE, 2, FILTER, FILTERSHADOW,1,
     FILTERSHADOWCOLOR,'#60b0ff')
  • oval_fcfeff bubble        adjust bubble size
    overlib('This is an <b>oval</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'oval_fcfeff', TEXTSIZE, 2, FILTER, FILTERSHADOW,1,
     FILTERSHADOWCOLOR,'#60b0ff')
  • square bubble        adjust bubble size
    overlib('This is a <b>square</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'square', TEXTSIZE, '83%'
  • square_ddeeff bubble        adjust bubble size
    overlib('This is a <b>square</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'square_ddeeff', TEXTSIZE, '83%'
  • square_fcfeff bubble        adjust bubble size
    overlib('This is a <b>square</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'square_fcfeff', TEXTSIZE, '83%'
  • square_metallic bubble        adjust bubble size
    overlib('This is a <b>square</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'square_metallic', TEXTSIZE, '83%'
  • pushpin bubble        adjust bubble size
    overlib('This is a <b>pushpin</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'pushpin', TEXTSIZE, '0.83em', RELX,-50, RELY,30,
     FILTER, FILTERSHADOW,2, FILTERSHADOWCOLOR,'#60b0ff')
  • pushpin_ddeeff bubble        adjust bubble size
    overlib('This is a <b>pushpin</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'pushpin_ddeeff', TEXTSIZE, '0.83em', RELX,-50, RELY,30,
     FILTER, FILTERSHADOW,2, FILTERSHADOWCOLOR,'#60b0ff')
  • pushpin_fcfeff bubble        adjust bubble size
    overlib('This is a <b>pushpin</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'pushpin_fcfeff', TEXTSIZE, '0.83em', RELX,-50, RELY,30,
     FILTER, FILTERSHADOW,2, FILTERSHADOWCOLOR,'#60b0ff')
  • quotation bubble        adjust bubble size
    overlib('This is a <b>quotation</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'quotation', TEXTSIZE, 'x-small')
  • quotation_ddeeff bubble        adjust bubble size
    overlib('This is a <b>quotation</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'quotation_ddeeff', TEXTSIZE, 'x-small')
  • quotation_fcfeff bubble        adjust bubble size
    overlib('This is a <b>quotation</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'quotation_fcfeff', TEXTSIZE, 'x-small')
  • roundcorners popup.        Adjust bubble size not applicable.
    overlib('This is a &ltb>roundcorners</b> popup.', BUBBLE,
     BUBBLETYPE, 'roundcorners', TEXTSIZE, 2, MIDX,30, MIDY,0, WRAP,
     FILTER, FILTERSHADOW,1, FILTERSHADOWCOLOR,'#60b0ff')
  • roundcorners_ddeeff popup.        Adjust bubble size not applicable.
    overlib('This is a &ltb>roundcorners</b> popup.', BUBBLE,
     BUBBLETYPE, 'roundcorners_ddeeff', RCBUBBLECOLOR,'#ddeeff',
     TEXTSIZE, 2, MIDX,30, MIDY,0, WRAP,
     FILTER, FILTERSHADOW,1, FILTERSHADOWCOLOR,'#60b0ff')
  • roundcorners_fcfeff popup.        Adjust bubble size not applicable.
    overlib('This is a &ltb>roundcorners</b> popup.', BUBBLE,
     BUBBLETYPE, 'roundcorners_fcfeff', RCBUBBLECOLOR,'#fcfeff',
     TEXTSIZE, 2, MIDX,30, MIDY,0, WRAP,
     FILTER, FILTERSHADOW,1, FILTERSHADOWCOLOR,'#60b0ff')
Note that &lt; and &gt; are the HTML entity references for "<" and ">" respectively.  These are used to avoid any problems associated with firewalls, especially Norton's firewall.  Also note that the FILTER feature for IE v5.5+ browsers is being used with the oval, pushpin, and roundcorners examples (and with the non-bubble popups on this page).

 

 

  

Stuart Crawshaw originally implemented speech bubbles with an earlier version of overlib and offered it to the Yahoo overlib group.  A simulation using overlibmws_bubble.js and the mws core module's REF-based positioning and class-based text styling (TEXTFONTCLASS) is at left.

Hover over the blue car first, then the mauve car, and finally the man at the left of the picture to see the speech bubbles invoked via an image map.



This document uses overlibmws and its commands.


Copyright Foteos Macrides
  2002-2010.
  All rights reserved.