Display Information with Your Web Page Links on Mouseover
By
William
Bontrager
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
here.
Why instant info? Here are examples of how it may be used:
1. 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!"
2. 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.
3. 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.
4. Instant hints, for quiz or problem solving pages.
5. Instant explanation of what data is expected or
required, for form fields.
6. 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:
1. Create your web page with your instant info links
and/or instant info form fields.
2. Create the content that will be instantly available.
3. 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
this page.
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:
<STYLE type="text/css">
<!--
.infoboxstyle {
position: absolute;
color: black;
border: black;
border-style: solid;
border-top-width: 1px;
border-bottom-width: 3px;
border-left-width: 6px;
border-right-width: 6px;
background-color: #EFEFEF;
z-index: 1;
visibility: hidden;
}
-->
</STYLE>
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.
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.
Now you have the tools to build a professional instant info system. If you
prefer to use a popup system or a JavaScript alert system, see the "FastInfo,
Build Your Own JavaScript Pop-Up Windows" ebook,
sold
here.
Whether you use the layers system presented in this article or one of the
systems described in the above ebook, having appropriate information available
the instant it's needed can give site visitors a good impression of your
business.
Will Bontrager
About the Author:
William
Bontrager Programmer/Publisher, "WillMaster Possibilities"
ezine
mailto:possibilities@willmaster.com
Are you looking for top quality scripts? Visit
Willmaster
and check out his highly acclaimed Master Series scripts. Some free, some
for a fee.
Web
Development
