2. Examples
 

The following examples illustrate the different types of "bubble" popups that are currently available.  The bold lettering below each link shows the overlib call to invoke it.  The second call is the same except that the ADJBUBBLE command (see below) 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')
  • oval bubble        adjust bubble size
    overlib('This is an <b>oval</b> bubble popup.', BUBBLE,
     BUBBLETYPE, 'oval', TEXTSIZE, 2, FILTER, FILTERSHADOW,1,
     FILTERSHADOWCOLOR,'purple')
  • square bubble        adjust bubble size
    overlib('This is a <b>square</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'square', 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,'purple')
  • quotation bubble        adjust bubble size
    overlib('This is a <b>quotation</b> bubble popup.',
     BUBBLE, BUBBLETYPE, 'quotation', 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,'purple')
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.