Bubble Command Reference

Go to the boughner.us

Introduction

This command reference lists the commands that can be used to achieve a speech bubble type of overLIB popup. The technique used to obtain this effect, as well as how one can go about adding their own "bubble" images, is described and discussed. Read the core module documentation for more information about other ways to customize overLIB.

To include support for the Bubble plugin, just include the following two lines in the HEAD section of the document:

<script type="text/javascript" src="overlib.js"></script>
<script type="text/javascript" src="overlib_bubble.js">
</script>

Remember that commands are always in uppercase (case-sensitive) and can have none or more parameter values.

Download this module as a zip file (includes all images).

How it works

The technique used for a "bubble" type of overLIB popup is basically the same approach used for the dropshadow effect. A schematic representation of what is done is shown in Figure 1.


Figure 1. Schematic illustration of a "bubble" type popup.

Two absolutely, positioned DIV containers are written to the overDiv container. The first DIV container (ID="bLayer") contains the bubble image and is positioned at the upper left corner top=0px, left=0px. The second DIV container (ID="bContent") contains the actual overLIB content that is normally generated. (In other words, rather than being written directly to overDiv, it is writen instead to the bContent layer.) However, before the layer generation routines are called, the fgcolor and bgcolor values are set to the null string and the border value is set to 0. Automatic horizontal/vertical positioning (hauto/vauto) and wrap (except for a 'roundcorners' popup) are turned off. The width of this popup is set to the content area width. This content layer is offset from the upper left corner of the overDiv layer by top=padTop 'px', left = padLeft 'px'. Since the overDiv container is absolutely positioned, it serves as the positioning context for these two DIV containers so that the z-index values shown in the above figure are relative to the z-index value that overDiv has. Other parameters that are disabled for "bubble" popups include:

The code for this module has been modified to work with the Hideform plugin. Although the area outside of the bubble image is transparent, it was found that, because of its size, it takes on the color of the background which will appear above any SELECT boxes that it overlays, at least in Internet Explorer versions 5.5 and higher. This doesn't appear to be a problem with Opera 7 or Netscape 6+.

Another thing to consider is what happens when the popup's height exceeds the content area height. There are two ways to proceed on this matter.

  1. Increase the content area height while keeping the aspect ratio of the image fixed. This means that the content width will also change which would require that the popup be regenerated, leading to possibly new height and width values. This also means that the layer generation routine would have to be called again with the new content area width. While this approach is probably the most accurate, it would require at a minimum that at least two additional calls to the layer generation routine be made in order to estimate approximate width/height values that would contain the popup's content. This is the approach used when one specifies the ADJBUBBLE parameter.
  2. I've chosen to implement a more approximate method when when the popup's height exceeds the content area height, and that is to increase the image's height without keeping the aspect ratio fixed. I compare the popup's height to the content area height (which is called bHtDiff in the code). If it is smaller, I take half of that difference and add it to the padTop value so that the popup is positioned vertically in the middle of the content area. If this difference is negative, I add the absolute value of the difference to the image's height while keeping it's width fixed. This means that there will be some distortion of the background image, but for most cases, it should not be too bad since most popups have content that are less than the content area height. This approach also means that the layer generation routine doesn't need to be recalled again.

Adding additional "bubble" images.

In setting up a "bubble" popup, I've tried to do it such a manner that the user can easily add more images if he so chooses. These images should be "gif" images because the area outside the boundaries of the "bubble" outline will be set to transparent and, at present, that can only be obtained with a "gif" image. The pertinent quantities required for each added image are illustrated in Figure 2.


Figure 2. Additional terms for bubble images

Additional quantities required for each added "bubble" image. The image's width (imgWidth) and height (imgHeight) values (in pixels) The content area's width (contentWidth) and height (contentHeight) values (in pixels). This area must be rectangular. The easiest way to determine this is by a graphics program; determine the largest rectangular content area that will fit inside boundaries of the "bubble" outline. The left (padLeft) and top (padTop) displacement of the content area from the upper left hand corner of the image (in pixels). The x-offset (arwTipX) and y-offset (arwTipY) of the tip of the "bubble" outline from the upper left corner of the image (in pixels). Just make sure that these values will cause the popup to lie outside the cursor's position (including the normal offsetx/y settings) when it is displayed. If that doesn't happen, you may find that the popup will flash on/off as you move the cursor. This happens because the mouseover/mouseout events are being toggled on/off. The items in BOLD lettering are what these quantities are called in the code. To add a new image to the "bubble" collection, one needs to register the image so that overLIB knows about it. You do this by calling the registerImages() routine, which takes two argruments. The first argument to this function is a comma, delimited text string which give the root name of the image, i.e., the image name without any prefixed path or postfixed extension (which is assumed to be a gif type image). The second argument is optional and is the path, relative to the location of the HTML file that uses the popup, where the images are stored. The default value of this second parameter is 'images'. Add each of the quantities indicated above to the similarily named arrays that follow this function call at the beginning of the overlib_bubble.js module. Be sure these values are inserted before the closing bracket (]) and separate them by a comma.

Commands

BUBBLE toggle
Indicates that a "bubble" type of popup should be shown. If no value is given to the BUBBLETYPE parameter (see below), a "flower" bubble image is used. Default value is no "bubble" popup is shown (0). When used on the command line, this parameter will cause the default setting of the appropriate parameter to be switched to its opposite state.
Variable: ol_bubble
BUBBLETYPE type of bubble image
A string value, giving the type of "bubble" image to display. Default value is 'flower'. Other permissible values are 'oval', 'square,' 'pushpin' and 'roundcorners'. This latter bubbletype of popup employs a 3 x 3 table with the outer cells filled with images (cornerTL.gif, edgeT.gif, cornerTR.gif,edgeL.gif, edgeR.gif,cornerBL.gif,edgeB.gif, and cornerBR.gif), with the actual content in the center cell, which can be adjusted to match its content. These images must be placed in the same directory that the other bubble images are placed (default value is images/); preloading will occur automatically when the popup is first called so that there may be a slight delay in the first appearance of a popup. The automatic horizontal/vertical alignment properties and the WRAP parameter can be used with the latter type of "bubble" popup.
Variable: ol_bubbletype
ADJBUBBLE resizes bubble for its content
Causes the "bubble" image to be resized proportionally (i.e., so that the aspect ratio [width/height] is held constant), according to how much content is in the popup. Default value is off (0). When used on the command line, it will switch the current default value to its opposite state. This parameter has no effect when BUBBLETYPE is 'roundcorners'. Use of this parameter could cause popups to be displayed slowly, depending on your machine's processor speed and should probably be used cautiously.
Variable: ol_adjbubble
IMAGEPATH specifies where images are stored
This parameter is a string variable that specifies where the images used in the Bubble popups are being stored.  This value can be either absolute or relative to the file which calls the popup.  The default value is 'images/', i.e., in the images subdirectory where the calling program resides.
Variable: ol_imagepath

Examples

The following examples illustrate the different types of "bubble" popups that are currently available. (Note the bold lettering below each link shows the overlib call to invoke the first popup. The second call is the same except that the ADJBUBBLE parameter has been added. The flower examples use the following style rule for the body text:
.fontClass {font-family: 'Comic Sans MS'; font-size: 20px;}

Note that &lt; and &gt; are the entity references for "<" and ">" respectively. These are used to avoid any problems associated with firewalls, especially Norton's firewall.

Back to top


Thank you for visiting boughner.us - Come back again soon.