Instant Info

This article shows you how to code an instant information system that can place

   definitions,
   instructions, and
   ~~ other information

near your site visitor's cursor. The information appears when the cursor hovers over certain links or when certain form fields are clicked.

The information pre-loads as the web page loads. Thus, it can appear instantly.

This instant info system uses layers to present the info. If you would like to use alert boxes or popup windows instead, see the "FastInfo, Build Your Own JavaScript Pop-Up Windows" ebook, sold at http://willmaster.com/a/17/pl.pl?pie4

Why instant info? Here are examples of how it may be used:

As additional information related to a link, to be presented when the cursor is over the link. For example, your link might be "Best Widgets" and the instant info could be "We searched far and wide for the best of the best. This is it!"
You offer many colors of each item. To print them all, would make your web page appear cluttered. With this system, you could have a "Colors" link that launches an instant list of colors.
You have a list of ingredients, parts, or other components. The instant info for each component could be a list of amount and quality required, what it's function is, whether or not it's actually necessary, substitution suggestions, alternate measurements, and so forth.
Instant hints, for quiz or problem solving pages.
Instant explanation of what data is expected or required, for form fields.
Instant help at any point on your web page.

The instructions are in this article instead of in the JavaScript. The JavaScript has instructions related only to the one section in the script that needs to be customized.

You implement it in three steps:

Create your web page with your instant info links and/or instant info form fields.
Create the content that will be instantly available.
Install the JavaScript.

Each step requires the prior step to be completed.

If you prefer to have a complete example at hand as you go through the instructions, you'll find it linked from http://willmaster.com/a/17/pl.pl?art179

The code has been tested to work with IE 5, Netscape 4, Netscape 6, and Opera 6.

I. Creating Your Instant Info Links and Form Fields

For links, it is rather straight-forward. Go ahead and create the links. If the href="____" attribute of any links do not contain a URL to another web page, replace the attribute with href="javascript:Null()"

Once you've created the links, insert

onMouseover="LL_showinfo(1)" onMouseout="LL_hideallinfo()"

into each link anchor tags.

Example:

<a href="javascript:Null()" onMouseover="LL_showinfo(1)" onMouseout="LL_hideallinfo()">Something</a>

See the number 1 between the parenthesis? The numbers need to be sequential -- (1), (2), (3), and so forth. It would look something like this:

<a href="javascript:Null()" onMouseover="LL_showinfo(1)" onMouseout="LL_hideallinfo()">Something</a>

<a href="javascript:Null()" onMouseover="LL_showinfo(2)" onMouseout="LL_hideallinfo()">Something Else</a>

<a href="javascript:Null()" onMouseover="LL_showinfo(3)" onMouseout="LL_hideallinfo()">Another</a>

For form fields, add the following two attributes to the form field tag:

onFocus="LL_showinfo(1)" onBlur="LL_hideallinfo()"

That number (1) needs to be sequential with other instant info form fields and instant info links. Let's suppose you had three instant info links above a form, and your form has two instant info form fields. The form fields might look something like this:

Your Email:
<input type="text" name="email" onFocus="LL_showinfo(4)" onBlur="LL_hideallinfo()">
Your Telephone Number:
<input type="text" name="phone" onFocus="LL_showinfo(5)" onBlur="LL_hideallinfo()">

II. Creating the Instant Info Content

This needs to be done in two parts, creating a CSS Style in the HEAD area and creating the content itself in the BODY area.

A. The CSS Style

Put the following CSS Style into the HEAD area of your page:

Now, let's customize it according to your preferences.

"infoboxstyle" is the style of the box containing the info content. Line by line, the style sheet rules in the example are:

   "position: absolute;" is required, and it must remain
   as is. This allows the JavaScript to place the
   info box into exact positions on the web page.

   "background-color: #EFEFEF;" is optional. Use it
   when you want to specify a background color for the
   info box. The color, as all colors in CSS, can be
   specified in hexadecimal, like the example, as an
   RGB value, or the color name.

   "color: black;" is optional. Use it when you want
   to specify a text color for the info box.

   "border: black;" is optional. Use it when you want
   to specify a color for a border around your info box.

   border-style: solid;" is optional. Use it when you
   want to specify a style for a border around your
   info box. Other than "solid", attributes that can
   be specified are "none", "dotted", "dashed", "double",
   "groove", "ridge", "inset", and "outset".

   "border-top-width: 6px;" is optional. When you want
   to have a top border for your info box, specify the
   number of pixels.

   "border-bottom-width: 3px;" is optional. When you want
   to have a bottom border for your info box, specify
   the number of pixels.

   "border-left-width: 1px;" is optional. When you want
   to have a left border for your info box, specify the
   number of pixels.

   "border-right-width: 1px;" is optional. When you want
   to have a right border for your info box, specify the
   number of pixels.

   "z-index: 1;" should be present. Although not strictly
   required, this directs the browser to make this layer,
   layer number one. (Your info box are layers.) Because
   each sub-menu will be displayed independent of the
   others, and only one sub-menu at a time, the number
   "1" is okay for all.

   "visibility: hidden;" is required. Before you create
   your info box (in the next step) change this to
   "visibility: show;" -- otherwise the browser won't
   display your info box during your development phase.
   Once the info box have been created, change this back
   to "visibility: hidden;" so the info box won't be
   displayed until the cursor travels over one of the main
   menu links.

B. The Instant Info Content

The HTML markup for the instant info content should be
placed immediately below the BODY tag. This is not
necessarily the place where they will appear, since the
content has specific location rules built in. The reason
for placing the content immediately below the BODY tag is
to ensure the browser reads the HTML markup before the
content needs to be displayed.

Here is an example of instant info content:

<div
id="aDefinition"
style="top:1px; left:1px; width:65px; height:40px; padding:6;"
class="infoboxstyle">
The content goes here.
</div>

Now, let's customize it according to your preferences.

The first attribute is "id" and it is required. The value of
"id" is a name you assign to that particular content. (The
JavaScript uses this name to keep track of which content is
which.)

The second attribute is "style" and is also required. Of the
five rules in the example style's value, only "padding:__"
is optional. The reason these particular style rules are
specified as an in-line style is because the information is
needed to calculate the display of the info box. Not all
browser JavaScript engines can access the style rules
specified in the HEAD area.

   "top:1px" specifies the distance in pixels from the
   top edge of the browser window to be the top left
   corner of the instant info box to be displayed. Make
   this 1px. The JavaScript will calculate positioning
   when the instant info is displayed.

   "left:1px" specifies the distance in pixels from the
   left edge of the browser window to be the top left
   corner of the instant info box to be displayed. Make
   this 1px. The JavaScript will calculate positioning
   when the instant info is displayed.

   "width:65px;" specifies the width of the sub-menu to
   be 65 pixels. Adjust as necessary, easier if you wait
   until the JavaScript is in place and you're testing
   the page.

   "height:40px;" specifies the height of the sub-menu
   to be 40 pixels. Adjust as necessary, easier if you
   wait until the JavaScript is in place and you're
   testing the page.

   "padding:6;" is optional. It specifies the padding
   you want between the border of the sub-menu and the
   text within the border. It's expressed in pixels.
   Adjust or omit as desired.

The third attribute is "class" and is required. It's value
must be the same as the class created in the HEAD area for
this purpose, "infoboxstyle" in our example.

III. Installing the JavaScript

At this point, unless you've already done so, pick up the JavaScript from the demonstration page at http://willmaster.com/a/17/pl.pl?art179

Paste the JavaScript into the HEAD area of your page.

Customize the JavaScript by specifying the "id" value of each instant info content item you created in step II, along with the sequential number related to the item.

The JavaScript has instructions and is, itself, an example of how to do it.

Will Bontrager

Copyright 2002 Bontrager Connection, LLC
"WillMaster Possibilities" ezine
http://willmaster.com/possibilities/