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 the same examples of speech bubble popups as in the primary BUBBLE support document and another BUBBLE supplement, but it includes:

OLbubbleImageDir='bubble';
OLbubbleIMGsuffix='_ddeeff';
OLbubbleRCsuffix='_ddeeff';


in a script block before those for importing the overlibmws modules, so that bubble popups will use a set of images which have had their background color changed to #ddeeff, have had an _ddeeff suffix added to their root name (e.g., flower_ddeeff.gif), and have been placed in a subdirectory named bubble.  It also includes:

RCBUBBLECOLOR,'#ddeeff'

in its OLpageDefaults function call to make the background color for the textual content of roundcorners popups match that of the image set which creates the border with round corners.  You might also wish to review the multicolor Speech Bubbles support document.

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,'#60b0ff')
  • 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,'#60b0ff')
  • 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,'#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.