|
EXAMPLES
1) Insert this script in the <HEAD> section of the page.
2) Insert the following code with the script inside the <BODY>
section of the page.
3) Insert this line of code inside the <A> </A> tags of a
link on the page that opens the popup box.
4) Define the content to appear inside
the popup boxes in this section of the script:
// Define the title for each box using text or images
var titleArray = new Array
titleArray[1]="<b>DHTML Scripts</b>"
titleArray[2]="<img src='http://simplythebest.net/images/smallhome.gif'
border='0'>"
// Define the content for each array. Make sure you use a += after the first line
of a link in an array.
var linkArray = new Array
linkArray[1]="• <a href='dhtml_menu_scripts.html'>DHTML menus</a><br>"
linkArray[1]+="• <a href='dhtml_animation.html'>DHTML animation</a><br>"
etc..
linkArray[2]="• <a href='shareware.html'>Shareware & Freeware</a><br>"
linkArray[2]+="• <a href='scripts/scripts.html'>Scripts library</a><br>"
etc..
5) Assign for each popup window the size,
the positioning, the style and the timer of the popup window in this section of the code:
<a href="Javascript:Void(0)" onmouseover="setObj(1,130,100,'topL','#d5e9ea','#e6f1f2','black','red')"
onmouseout="timer(2)">DHTML
Scripts</a>
The order of each variable in the onMouseOver event is:
| array
number |
width |
height |
relative positioning to the link |
background color |
title box
background color |
content box
background color |
title text color |
content text color |
timer |
| has to match with the titleArray[#] and linkArray[#] |
decimal
value |
decimal
value |
topL = top-left
topR = top-right
bottomL = bottom-left
bottomR = bottom-right |
#number
or
color name |
#number
or
color name |
#number
or
color name |
#number
or
color name |
#number
or
color name |
set the number of seconds before
closing |
6) You can further modify the style of the
tables and the font for the text and links inside the popup boxes in this section of the
script (make sure to use single quotes inside double quotes):
text="<table
width='"+(winWidth-4)+"' height='"+(winHeight-4)+"' border='0'
bgcolor='"+tableColor+"' cellspacing='0' cellpadding=1>"
text+="<tr><td width='"+(winWidth-4)+"' height='20'
align='center' valign='top' bgcolor='"+headerColor+"'>"
text+="<font face='arial,helvetica' color='"+tcolor+"' SIZE='-1'>"+titleArray[value]+"</font>"
text+="</td></tr>"
text+="<tr><td width='"+winWidth+"' align='left'
valign='top'>"
text+="<font face='verdana,helvetica' color='"+bcolor+"' SIZE='-2'>"+linkArray[value]+"</font>"
text+="</td></tr></table>"
And in this section of the script (in the BODY
section):
<layer name="nsviewer" bgcolor="#cccccc"
width=0 height=0 style="border-width:thin;z-index:1"></layer>
<script language="JavaScript1.2">
if (iens6){
document.write("<div id='viewer' style='background-color:#cccccc;marginleft:0;visibility:hidden;position:absolute;width:0;height:0;
z-index:1;overflow:hidden'></div>")
7) Optional: insert the onClick event handler inside the <BODY> tag as follows:
<body onClick="stopIt()",
followed by other tags such as bgcolor, etc..
This is optional, use this tag if you want the popup box to disappear when
one clicks anywhere inside the open page.
For
more information you can visit Ron Grafe's
web site.
|
