How To Use The coolTip / overLIB1 Extension
This page shows how to quickly start using the coolTip / overLIB extension for Dreamweaver and how to apply the commands within the suite to an HTML tag. Consult Core Module command reference for a complete listing of all of available core commands, and follow the links to the different plugins for a description of the commands associated with the different plugins2.
- If you haven't already done so, install the extension in your version of Dreamweaver (only MX and higher are supported). The easiest way to do this is by double-clicking on the Macromedia Extension Package file (.mxp). The other way would be to start the Extension Manager and install it from there. If this is done from within Dreamweaver itself, it will have to be stopped and re-started for the commands to become available to you.
- With the element selected, add your coolTip / overLIB call by clicking Commands
-->coolTip / overLIB->Insert command flyout. If this is a new
document, the interface panel that is displayed will show all of the default
variable settings associated with the Core Module as well as all of the
plugin modules. For this example, we'll add "See
the REB code set here" as the main body text and "overLIB
Plugins" as the caption.
- If an coolTip / overLIB call has already been applied to the element, then the panel associated with this command would also show the commands being applied in that call. There will also be a "Remove" button in the upper right-hand corner of the panel, and the radio buttons on the first panel will indicate which utility is being used.
- When all panels have been completely filled out, a prompt box will appear. For overLIB, the maximum index will be 1, but for coolTip there could be several commands. This prompt box will not appear if only overLIB commands are being inserted on the page. Enter the index of the command that you want to modify in this box (or just OK for the first or only one) and that one will be selected. Clicking the Cancel button will behave in the same way as clicking the Cancel button on the main panel.
- The most common items to be filled in are shown by the shading in the
figure (the items marked 1 and 2. Note, this interface is from an earlier
version of the extension).
As indicated here you can also insert HTML markup and just about anything else. The opening and closing tags of HTML markup will be converted to their entity references when inserted on the page, but will be displayed normally in the panel as a convenience to the author. See the Help pages for further discussion of this point.
As a user of this extension, you may be wondering what commands get included in the coolTip / overLIB call. The answer is that only selections that differ from their default settings will be included. This point will be discussed further in section 9 .
- As illustrated, the "onmouseover" event is the default event for coolTip / overLIB and will include "return" when inserted on the page.
- If another event is wanted it can be selected from the drop down box which contains events that apply to most elements on a page, according to the W3C Standards. If the event you want is not in this drop down box, then check the box labelled Other Event and type the event name in the box to its right, making sure that you include the initial "on".
- As author, you are responsible for making sure that the event that you associate with this function call is supported by the selected element in your target browser because there will be no checks made to guarantee that it is a valid event for the element.
- Because of the number of commands involved, they have been divided into numerous tabbed panels. Commands not applicable to overLIB will be greyed out (i.e., disabled). The Core Module commands are found in the first three panels.
- As a final comment with regard to the markup that is inserted in the textarea marked TEXTSTRING, the author doesn't need to escape single quotes as the extension handles that for him/her. However, when text is displayed here the escaping will be removed.
click on the second tab labelled More Basic Options and select the
modules that you want to include on your page. You must include at a minimum
the Core Module. If you forget to do this, a warning will be given when
the "Add" button is clicked. When a plugin is selected, you'll
will be shown a File Selection Dialog that will allow you to select where
that plugin is located, if this hasn't already been done. As shown here,
no plugins have been selected yet, since none are highlighted. If you had
included some plugins they would have been highlighted in this selection
box, which accepts multiple selections.
- When a command is inserted from one of the plugin tabs (Plugins and Styling) and the source file hasn't been referenced yet, a File Selection Dialog will appear so that you can select where that module is located.
- After all commands have been selected, just click the "Add" button
on the upper right and after a short delay, the command call will be added
to the element. If there had been an coolTip / overLIB call already attached
to this element, then the "Remove" button would also have been
shown in the upper right, allowing the user of this extension to quickly
remove that call for this element.
- If you're making changes to an existing coolTip / overLIB call, it isn't necessary to first remove it. Just make the necessary changes in the UI and then click on "Add". The existing call will be replaced by the new one.
- When the coolTip / overLIB call is added, links to all of the plugin source files that haven't yet been included will be inserted in the HEAD section and a DIV containment element with an ID of "overDiv" for overLIB or "ctDiv" for coolTip will be placed on the page just after the BODY tag, if one isn't there already. (Note: with version 4.10 or later of overLIB or with coolTip, this latter step isn't necessary since if you don't have the DIV container element declared, it will be dynamically created for you. However, it is a good idea to include the DIV declaration statement explicitly.)
- When all coolTip / overLIB calls from all elements on the page have been removed, you'll be given a choice of whether you want to also remove these source file links and the "ctDiv / overDiv" declaration statement too.
- When the coolTip / overLIB call has been inserted for the element, the UI will close with the element still selected, so that close command can be inserted by choosing Commands --> coolTip / overLIB -->Close - nd, which displays the interface shown here. The "onmouseout" is selected by default. Place a check in the checkbox if a "return" is to be included in the call. An optional delay in closing can be added by typing the delay time (in milliseconds) in the text box. (For coolTip, the text box labelled PUID may also be filled in to indicate which popup to close; this figure shows the interface when used with coolTip, since the PUID item is not disabled). Now click the "Add" button and the nd() command will be added and this UI will close.
- There is one final item that must be discussed. As mentioned in a previous
section, commands are inserted in an coolTip / overLIB call when the author's
choices differ from the default variable settings (those are the ones that
begin with the prefix 'ol_' in overLIB and 'cd_' in coolTip.
Note these variables should be set using either ctPageDefaults or overlib_pagedefaults
to avoid any possible errors.) But
suppose that an author has changed some of these default variables. How
does the extension know about these changes? That's
where the last command of this suite comes in. Set
default variables (see illustration) allows the author to
set default variables for his web page. Place your cursor anywhere on the
page (you don't need to have an element selected for this command to be
active, whereas you do for the other two comands of this suite) and then
--> coolTip / overLIB
-->Set default variables. Make all of the changes
that reflect the default variable settings in the UI, ensure that the radio
button Change DEFAULT variables is selected, then click
the "Apply" button on the upper right. Answer OK to the prompt
about making changes to the default variables. When the changes have been
applied, the radio button will switch to Add COMMAND to your page,
which is the default choice for this command. You'll only have to do this
once, since your settings are saved in the file called your_page_name.mno in
the _notes directory, unless you delete
- An element can be selected before carrying out the steps outlined above, just make sure that the Change DEFAULT variables option is checked before clicking the "Apply" button. If you don't, then either a ctPageDefaults or overlib_pagedefaults command will be added to the selected element.
- If you want to insert a Set default variables call in the HEAD section of your page, proceed as outlined above, making sure that the EVENT is set to "none", then click on the "Apply" button on the upper right.
- If there is already a SCRIPT block in the HEAD section without a SRC attribute, the command will be inserted at the beginning of this block, otherwise a separate SCRIPT block containing the command will be inserted.
- If there is already a function call of this type in the HEAD section, the UI will display the command settings being applied in the call along with the default settings of all other commands, and have the EVENT set to "none". Note that only the command parameters of the selected command, in the case of multiple instances, are shown in the interface.
- If you use ctPageDefaults/overlib_pagedefaults on your web page, you should keep the default variable settings synchronized. Otherwise, you may find that the behavior of your coolTip / overLIB calls on your web page, after applying one of these functions, do not correspond to what you would expect. Also the settings that are saved have no influence on your web page; they are merely for allowing this extension to work well in conjunction with your web page design. If things get messed up, you can start over by simply deleting your_page_name.mno in the _notes directory.
- If a plugin needs to be removed, click on Commands --> coolTip / overLIB --> Manage Modules (found only in the Advanced Version of this Extension). This will bring up an UI that shows whether there is a link to a particular module and whether any of its commands are being used on the page. If no commands are being used on the page, then just place a check in the box in the column Remove Link and its link statement will be removed from the page when the "Apply" button is clicked. Links to plugins are added as described in Section 6 above.
These are the basic steps needed to apply the commands of the coolTip / overLIB suite to elements on your web page. More details can be found by clicking on the "Help" button in the UI. Hopefully, this extension will make it easier to apply coolTip / overLIB to your web pages.
1 The coolTip utility is derived from overLIB; consequently they share many of the same commands and that is why these two utilities are discussed together. The main difference between the two utilities is that coolTip is totally object based, with each popup having its own set of commands. From the user's viewpoint, it means that more than one popup at a time can be visible on a page at the same time which is not possible in overLIB.
2 This extension will work with the "official" version of overLIB if one keeps in mind that not all of the plugin commands are supported in the "official" version. However, all of the Core Module commands would be applicable.