Image w/ description tooltip v2.0
Note: Script completely rewritten April 25th 2010, named version 2.0
Description: Move
the mouse over a link and have the image of your choice plus corresponding
description pop up, by using this image tooltip script. Each tooltip is
defined inside the script then associated with an element on the page by
inserting a "rel" attribute into the later. Moreover, each tooltip
can easily sport a completely different style from its peers. thanks to the
script's support for custom CSS styles that can be defined on each tooltip
individually inside the script.
The script detects for window edges and keeps each tooltip inside it.
Demo: Move your mouse over any of the following links:
Directions 
Step 1: Insert the below script into the <head> section of your page:
The above code references two external files which you should download below (right click, and select "Save As"):
- ddimgtooltip.js (edit top portion of this script to define your image tooltips)
- ddimgtooltip.css
Near the top of ddimgtooltip.js is where you define your tooltips:
tooltips[0]=["red_balloon.gif", "Here is a red balloon<br
/> on a white background", {background:"#FFFFFF", color:"black", border:"5px
ridge darkblue"}]
tooltips[1]=["duck2.gif", "Here is a duck on a light blue background.",
{background:"#DDECFF", width:"200px"}]
tooltips[2]=["dynamicindex14/winter.jpg"]
tooltips[3]=["dynamicindex17/bridge.gif", "Bridge to somewhere.", {background:"white",
font:"bold 12px Arial"}]
Each tooltip's syntax should be as follows:
tooltip[x]=['path_to_image', 'optional desc', optional_CSS_object]
Where x should be an sequential integer starting from 0, with the following 1 to 3 components defined:
- Full path or URL to the tooltip image
- Description that's displayed beneath the image. Optional.
- Object containing the desired CSS properties to add to the tooltip. The
syntax should be:
{property1:"cssvalue1", property2:"cssvalue2", etc}
where "property" should be a valid CSS property, and "value" a valid CSS value. If more than one pair is defined, separate each pair with a comma.
Step 2: Then, to associate a tooltip with a
link on your page, just give it a "rel" attribute of
imgtip[x], with x being the index of the tooltip you wish to display for
the given link (0=1st tooltip, 1=2nd tooltip etc). Here is some sample links you
can insert onto your page to illustrate this:
Enjoy!