.ddimgtooltip{
box-shadow: 3px 3px 5px #818181; /*shadow for CSS3 capable browsers.*/
-webkit-box-shadow: 3px 3px 5px #818181;
-moz-box-shadow: 3px 3px 5px #818181;
display:none;
position: absolute;
border:10px solid #B0A591;
background:white;
color: black;
z-index:2000;
padding: 4px;
}
/* Anleitung auf http://www.dynamicdrive.com/dynamicindex4/imagetooltip.htm
Insert the below script into the section of your page:
Near the top of ddimgtooltip.js is where you define your tooltips:
tooltips[0]=["red_balloon.gif", "Here is a red balloon 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: