overLIB - Speech Bubble Popups in overlibmws (Multicolor Backgrounds)

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.

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. 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,'
+'roundcorners,roundcorners_ddeeff,roundcorners_fcfeff';

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

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,'
+'roundcorners,roundcorners_ddeeff,roundcorners_fcfeff';

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

Examples

The following examples illustrate each of the three different sets of "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 flower bubble popup.',
BUBBLE, TEXTFONTCLASS, 'comic20')
flower_ddeeff bubble adjust bubble size
overlib('This is a flower bubble popup.',
BUBBLE, BUBBLETYPE, 'flower_ddeeff', TEXTFONTCLASS, 'comic20')
flower_fcfeff bubble adjust bubble size
overlib('This is a flower bubble popup.',
BUBBLE, BUBBLETYPE, 'flower_fcfeff', TEXTFONTCLASS, 'comic20')

oval bubble adjust bubble size
overlib('This is an oval bubble popup.',
BUBBLE, BUBBLETYPE, 'oval', TEXTSIZE, 2, FILTER, FILTERSHADOW,1,
FILTERSHADOWCOLOR,'#60b0ff')
oval_ddeeff bubble adjust bubble size
overlib('This is an oval bubble popup.',
BUBBLE, BUBBLETYPE, 'oval_ddeeff', TEXTSIZE, 2, FILTER, FILTERSHADOW,1,
FILTERSHADOWCOLOR,'#60b0ff')
oval_fcfeff bubble adjust bubble size
overlib('This is an oval bubble popup.',
BUBBLE, BUBBLETYPE, 'oval_fcfeff', TEXTSIZE, 2, FILTER, FILTERSHADOW,1,
FILTERSHADOWCOLOR,'#60b0ff')

square bubble adjust bubble size
overlib('This is a square bubble popup.',
BUBBLE, BUBBLETYPE, 'square', TEXTSIZE, '83%'
square_ddeeff bubble adjust bubble size
overlib('This is a square bubble popup.',
BUBBLE, BUBBLETYPE, 'square_ddeeff', TEXTSIZE, '83%'
square_fcfeff bubble adjust bubble size
overlib('This is a square bubble popup.',
BUBBLE, BUBBLETYPE, 'square_fcfeff', TEXTSIZE, '83%'

pushpin bubble adjust bubble size
overlib('This is a pushpin 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 pushpin 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 pushpin 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 quotation bubble popup.',
BUBBLE, BUBBLETYPE, 'quotation', TEXTSIZE, 'x-small')
quotation_ddeeff bubble adjust bubble size
overlib('This is a quotation bubble popup.',
BUBBLE, BUBBLETYPE, 'quotation_ddeeff', TEXTSIZE, 'x-small')
quotation_fcfeff bubble adjust bubble size
overlib('This is a quotation bubble popup.',
BUBBLE, BUBBLETYPE, 'quotation_fcfeff', TEXTSIZE, 'x-small')

roundcorners popup. Adjust bubble size not applicable.
overlib('This is a &ltb>roundcorners 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 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 popup.', BUBBLE,
BUBBLETYPE, 'roundcorners_fcfeff', RCBUBBLECOLOR,'#fcfeff',
TEXTSIZE, 2, MIDX,30, MIDY,0, WRAP,
FILTER, FILTERSHADOW,1, FILTERSHADOWCOLOR,'#60b0ff')

Note that < and > 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-2008. All rights reserved.