|
EXAMPLES
| a) with borders and different fonts and
colors |
|
b) snapped to the left above the cursor |
WebQuestPro.com |
|
SimplytheBest Scripts |
| |
|
|
| c) without borders or images |
|
d) using a background picture |
PlanMagic.com |
|
SimplytheBest.net |
| |
|
|
| e) fixating the position |
|
f) placing any html in the popup and it sticks |
See
popup on top |
|
Business planning software |
| |
|
|
| g) make them stick when you click |
|
h) creating a popup menu |
What's new! |
|
DHTML Scripts & Javascripts |
1) Download
this ZIP file with
the overlib.js script file and unzip into the appropriate directory.
2) Insert the following code anywhere in the <BODY> section of the page.
3) Insert the following HTML code in
the <BODY> section where you want the popup box to appear in the page.
Example a)
Example b)
Example c)
Example d)
Example e)
Example f)
Example g)
Example h)
4) To change the links and
the message in the popup box or the font-family, font color, font size and
background color look for this piece of HTML code:
Example a)
<a href="http://webquestpro.com" onmouseover="drc('Enter into the world of professional web marketing.','PlanMagic WebQuest
Pro'); return true;" onmouseout="nd(); return
true;">WebQuestPro.com</a>
Example b)
<a href="scripts/DHTML_scripts.html" onmouseover="overlib('CGI scripts, DHTML scripts,
Javascripts and VB scripts collection', HEIGHT, 30, LEFT, ABOVE, SNAPX, 5, SNAPY, 10); return true;" onmouseout="nd(); return
true;">SimplytheBest Scripts</a>
Example c)
<a href="http://planmagic.com"
onmouseover="overlib('<b><i><font color=\'#000000\'
size=\'2\' face=\'Verdana\'>Business planning and<br>Marketing planning software</font></i></b>',
FULLHTML); return true;" onmouseout="nd(); return true;">PlanMagic.com</a>
Example d)
<a href="http://simplythebest.net" onmouseover="overlib('<b>Shareware & Freeware, Affiliate Programs, Information Library, Web Hosting, Music, Fonts,
DHTML Scripts and More..</b>', TEXTCOLOR, '#0000cc', WIDTH, 232, HEIGHT,
104, BACKGROUND, 'images/background.gif', PADX, 60, 20, PADY,
20, 20); return true;" onmouseout="nd(); return
true;">SimplytheBest.net</a>
Example e)
<a href="javascript:void(0);" onmouseover="return
overlib('Your message here.', FIXX, 80, FIXY, 250)" onmouseout="return nd();">Fixating the position</a>
Example f)
<a href="javascript:void(0);" onmouseover="return overlib('<b>Your list:</b><UL><LI>Item 1<LI>Item 2<LI>Item 3</UL>', STICKY);" onmouseout="return nd();">Your description</a>
Example g)
<a href="javascript:void(0);" onmouseover="return
overlib('Click on me!');" onclick="return overlib('This one stays
around for a while!', STICKY, CAPTION, 'Sticky');" onmouseout="return nd();">Click
here</a>
Example h)
<a href="javascript:void(0);" onmouseover="overlib('<a href=\'dhtml_scripts/dhtml_messages.html\'>DHTML Messages</a><br>
<a href=\'dhtml_scripts/dhtml_menus.html\'>DHTML Menus</a>', STICKY); return true;" onmouseout="nd(); return
true;">DHTML Scripts & Javascripts</a>
5) To change the background colors, the
border and the font colors, the font-family and other variables of the popup
boxes in examples a), b), e), f), g) and h), look for this piece of code in the .js
file:
// Main background color
(the large area)
// Usually a bright color (white, yellow etc)
if (typeof ol_fgcolor == 'undefined') { var ol_fgcolor = "#CCCCFF";}
// Border color and color of
caption
// Usually a dark color (black, brown etc)
if (typeof ol_bgcolor == 'undefined') { var ol_bgcolor = "#333399";}
// Text color
// Usually a dark color
if (typeof ol_textcolor == 'undefined') { var ol_textcolor = "#000000";}
// Color of the caption text
// Usually a bright color
if (typeof ol_capcolor == 'undefined') { var ol_capcolor = "#FFFFFF";}
// Color of "Close"
when using Sticky
// Usually a semi-bright color
if (typeof ol_closecolor == 'undefined') { var ol_closecolor = "#9999FF";}
// Font face for the main
text
if (typeof ol_textfont == 'undefined') { var ol_textfont = "Verdana,Arial,Helvetica";}
etc..
Have a look at dhtml_script_43a
for a
popup window with webcam using this script.
Have a look at
dhtml_script_120 for an
enhanced version of this script.
Visit also Erik
Bosrup's web site for
more details on the overLIB script.
|
