In-Page Pop-Ups are different from both Pop-Up Pages and Windows in that the Pop-Up feature is contained within the current page rather than being external to it.

"Alternate Text" features can create tooltip-like effects for some elements within a web page, such as images.

Alt Text however is limited in style and behavior, and it can only be used with a limited set of web page elements.

Enhanced Tool Tips can be used with any web page element that can have "events" and the Tool Tips can be more flexibly defined.
            In-Page Pop-Ups and Expansions            

Examples of interactive techniques for displaying additional page content.


Enhanced Tool Tips
Tool tips provide short context-sensitive textual information that appears when you point to an applicable area of interest. While standard "vanilla" HTML has very limited capabilities for this, the
following examples utilize DHTML (Dynamic HTML - with Java Scripts) to provide more robust features - coloring and sizing variations, the ability to attach tool tips to a wider range of web page elements, and more.

Hover over (point to) the links below for same variations:


Hover over the below picture for another example:


Hover over the below paragraph for another example:

This last example shows how a tooltip can be attached to an entire paragraph (without a link) rather than just hightlighted text, etc.


Pop-Up Context Menus

  Hover over (point to) the image
on the left for a Pop-Up Menu.

Selectable Images (or Any Other Content)
Click on the links in the following paragraph to pop-up different images below.

The cosmos is beautiful and fascinating. Filled with comets, galaxies, dark globules, the images are astounding. Supernovas leave remains that are spectacular. Nubulas - where stars are being born - have names such as Crab, Cat's Eye , Crescent, Jelly Fish, Veil and more...













In-Page Pop-Up (with Transition Effects - IE)
Click on the link below to display an In-Page Pop-Up advertising display with Transition Effects for both its appearance and disappearance. (Many different transition effects are available.)

Transition In-Page Pop-Up

Expand/Collapse Region
This first three 'tabbed' examples allows users to view various topics. Each topic can contain any web content and can be as large as required. Tabs can be positioned on the top, bottom, right or left and can be variously styled.

Left Tab Style

Click on the headings below to change content.

Overview
Features
Support

Top Tab Style

Click on the tabs below to change content.

Ancient Sites Choice Locations Vacation Spots

In-Line Tab Style

Click on the tabs below to change content.

Interesting Shots
Fractal Designs
The Fog of War

The following example - applicable for help, instructions, tips, etc. - allows the user to expand and collapse additional context-specific information.


Click on the Show/Hide Instrustions link below for
a simple example of instructions for an input field.


    Show Instructions

 
Another common use for the Expand/Collapse feature is for Frequently Asked Questions (FAQ),
as in the following example:



Collapsing Containers Click to Collapse
Collapsing and Expanding Containers can also be very effective in freeing up space on a page when a visitor no longer wishes to view some content.

Both the container appearance as well as the collapse/expand link can be flexibly styled. In this sample, the collapse/expand link image is on the right of the title bar.

Click to Collapse
Click to Expand.

Web Page and Dialog PopUps   GIF Animation Samples
Blue Discus Home Page Blue Discus Home Page