function  Display (div)
{
  // find out current cursor position (different: IExplorer - Netscape!)

  var cursorX =
  var cursorY =
	:
	:

  // calculate where to place DIV

  var divX =
  var divY =
	:
	:

  // launch DIV at place divX, divY

  div.style.pixelLeft = cursorX + document.body.scrollLeft;
  div.style.pixelTop = cursorY + document.body.scrollTop;
  div.style.display = '';
}

function  Hide (div)
{ 
  // just make DIV invisible

  div.style.display = "none";
}

// global variable
var wPopup = 0;

function  OpenW (dest,windowW,windowH)
{
  // handle optional arguments

  var winW = OpenW.arguments.length > 1 ? windowW : 300;
  var winH = OpenW.arguments.length > 2 ? windowH : 200;

  // find out current cursor position (different: IExplorer - Netscape!)

  var cursorX =
  var cursorY =
	:

  // calculate where to place window

  var winX = ...
  var winY = ...
  var S = 'left=' + windowX + ',top=' + windowY + ',width=' + winW + ',height=' + winH;

  // launch window at place winX, winY

  wPopup = window.open(dest, '', S);
}

// global variable
var wPopup = 0;

function  CloseW (div)
{ 
  if (wPopup)  wPopup.close();
  wPopup = 0;
}

For Navigation: Cursor =====>

Use Temp. Info's
to show "what's behind"!

(IE only)

Online communication has many advantages over conventional writing on paper. One of it is that you can differentiate between important and not-so-important information vis-à-vis your reader. This article shows you how this can be done.

When writing on paper, you just can spill "everything" at once over the reader.
On paper you have leave it to the reader, to sort out WHAT is interesting and WHERE it is written.
But in online-communication the idea is to present a subject so compact
Readers are "invited" to catch a glimpse and "drill down" at points they feel relevant.
In online-communication you can (= should!) differentiate:

The most fundamental points you should present first.
Things that will be relevant to a subset of readers only, you should present upon request only.
Details (such as …) you can present as "temporary info".

Good methode to present upon request only: Dyn. List
3 kinds of "temporary info": TITLE, temp. DIV, temp. Window
Additional advantage of temp. Info: it's useful for protecting your contents
If you want to know more about a concept on colored background, point to it with the cursor and leave it there for a moment.

1. TITLE = Temporary "ToolTip"

In HTML, all the "block tags" can have the property TITLE=… . Click here if you want to know how this is coded in HTML.

In HTML there are many tags ... that can have the property TITLE=… . You simply have to add TITLE="…" . Within the quotes there is the comment you want to have displayed when the cursor is resting on the tagged information (text or image). Coding scheme: <TAG … TITLE="…">tagged text</TAG> Usually, a title is a short 1-line comment to the tagged information (examples ...). If you want a title with multi-line layout, however, you can do that like this.

A little hint could save you some coding time and much energy.

Main advantage of a title - it is very easy to implement: Simply add TITLE=… to any of the block tags, followed by the comment you want displayed when the user gives the cursor a rest on the tagged information. It is part of standard HTML, i.e. you don't need the download offered at the bottom. (Nice side effect ... .)

Disadvantages of a title - you have almost nothing under your own control:

the background is always yellow
line breaks are inserted automatically, often inapproprately
after a few seconds it disappears automatically
the text is always flowing in the standard font of your document
it is always plain text (no table, image, ... )
if you want to use the same text for > 1 Title, you have to write it each time anew
you have no control as to the time delay when or the place where it appears
(Title usually appears right beneath the cursor. It can, however, appear in the most "impossible" places, in extreme cases even outside the browser window.)

These disadvantages you can avoid by the second kind of temporary information:

2. Temporary DIV

Just about anything that can be coded in HTML can also be enclosed in <DIV> tags (examples ...) Click here if you want to know coding details.

<DIV ID="…" STYLE="position:absolute; width:…; height:…;display:none; … ">
	:
    contents
	:
</DIV>
The anchor of a temp. DIV (= the place where the user is to move the cursor onto) is coded as follows:

<(tag) STYLE="background-color:… cursor:hand" ONMOUSEOVER="Display(id)" ONMOUSEOUT="Hide()"

User-friendly: Include any style property indicating that there's something "hidden behind"!

In this article I chose to set the background color to light-green.

In addition, you can have any style you like.

e.g. border

move the contents a bit away from the border

Coding such a DIV right within the main text → main text is interrupted by an empty stripe.

Therefore, a DIV should be coded

in the <HEAD> part, before the <BODY> tag

after the end of the main text

Only three restrictions you should keep in mind with temporary DIV's:

It should be considerably below 1 screen in size
(no point in having bulky information in a temporary DIV)
A temporary DIV is read-only
(when the cursor is moved away from the anchor, it disappears - meaning ... )
If you want that, you need a Dynamic List.
The contents of a temporary DIV are always a "hard-coded" part of your document. (If you want to give a temporary insight into variable contents, you need the third kind of temporary information, a temporary window)

3. Temporary Window

Frequently you will want to give a look into a contents layed down somewhere else already (either for data integrity, or simply because you are too lazy to copy it). A temp. Window is good for that - it gives:

look into file of variable contents (.htm, .txt, .gif, .jpg, or any of the defined file types)
preliminary look into what a link would lead to (temp. Window can be combined with normal link - see Dynamic List)
visual reminder to something mentioned on another page (requires 'URL#bookmark' + bookmark in the other page)
you can even remind of a previous section on the same page (e.g. TITLE)
for a good reminder, it might be necessary to fiddle a bit with width and height of Window.

Click here if you want to know how this is coded in HTML.

Use Temp. Info's to show "what's behind"!

(IE only)

Use Temp. Info's
to show "what's behind"!