DHTML Scripts

Web Tech Online

DHTML Scripts

Page Effects

Cross Hairs

3 parts to this script

======================================================

part 1

======================================================

<style>

<!--

#leftright, #topdown{

position:absolute;

left:0;

top:0;

width:1px;

height:1px;

layer-background-color:black;

background-color:#0080FF;

z-index:100;

font-size:1px;

}

-->

</style>

=====================================================

part 2

=====================================================

====================================================

part 3

=====================================================

<!--

Document crosshair Script-

By Web Tech Online (http://www.fortunecity.com/skyscraper/online/1501)

For full source code, installation instructions,

100's more free DHTML scripts, and Terms Of

Use, visit http://www.fortunecity.com/skyscraper/online/1501

if (document.all&&!window.print){

leftright.style.width=document.body.clientWidth-2

topdown.style.height=document.body.clientHeight-2

}

else if (document.layers){

document.leftright.clip.width=window.innerWidth

document.leftright.clip.height=1

document.topdown.clip.width=1

document.topdown.clip.height=window.innerHeight

}

function followmouse1(){

//move cross engine for IE 4+

leftright.style.pixelTop=document.body.scrollTop+event.clientY+1

topdown.style.pixelTop=document.body.scrollTop

if (event.clientX<document.body.clientWidth-2)

topdown.style.pixelLeft=document.body.scrollLeft+event.clientX+1

else

topdown.style.pixelLeft=document.body.clientWidth-2

}

function followmouse2(e){

//move cross engine for NS 4+

document.leftright.top=e.y+1

document.topdown.top=pageYOffset

document.topdown.left=e.x+1

}

if (document.all)

document.onmousemove=followmouse1

else if (document.layers){

window.captureEvents(Event.MOUSEMOVE)

window.onmousemove=followmouse2

}

function regenerate(){

window.location.reload()

}

function regenerate2(){

setTimeout("window.onresize=regenerate",400)

}

if ((document.all&&!window.print)||document.layers)

//if the user is using IE 4 or NS 4, both NOT IE 5+

window.onload=regenerate2

//-->

</script>

Curor Snake

4 parts to this script

=================================================

part 1 edit your message here

================================================

//created by Earl P. Figgeroa

http://www.fortunecity.com/skyscraper/online/1501 please leave this notice intact if using this script//

<!--

var x,y

var step=20

var flag=0

var message="Web Tech Online"

message=message.split("")

var xpos=new Array()

for (i=0;i<=message.length-1;i++) {

xpos[i]=-50

}

var ypos=new Array()

for (i=0;i<=message.length-1;i++) {

ypos[i]=-50

}

function handlerMM(e){

x = (document.layers) ? e.pageX : event.clientX

y = (document.layers) ? e.pageY : event.clientY

flag=1

}

function makesnake() {

if (flag==1 && document.all) {

for (i=message.length-1; i>=1; i--) {

xpos[i]=xpos[i-1]+step

ypos[i]=ypos[i-1]

}

xpos[0]=x+step

ypos[0]=y

for (i=0; i<message.length-1; i++) {

var thisspan = eval("document.all.span"+(i)+".style")

thisspan.posLeft=xpos[i]

thisspan.posTop=ypos[i]

}

if (flag==1 && document.layers) {

for (i=message.length-1; i>=1; i--) {

xpos[i]=xpos[i-1]+step

ypos[i]=ypos[i-1]

}

xpos[0]=x+step

ypos[0]=y

for (i=0; i<message.length-1; i++) {

var thisspan = eval("document.span"+i)

thisspan.left=xpos[i]

thisspan.top=ypos[i]

}

var timer=setTimeout("makesnake()",10)

}

//-->

</script>

===========================================

part 2 - customize your font size and color here

===========================================

<STYLE>

.spanstyle {

position:absolute;

visibility:visible;

top:-50px;

font-size:10pt;

font-family:Arial;

color:808066

}

</STYLE>

=======================================================

part 3

========================================================

<body onLoad="makesnake()">

=========================================================

part 4

=========================================================

<!--

for (i=0;i<=message.length-1;i++) {

document.write("<span id='span"+i+"' class='spanstyle'>")

document.write(message[i])

document.write("</span>")

}

if (document.layers){

document.captureEvents(Event.MOUSEMOVE);

}

document.onmousemove = handlerMM;

//-->

</script>

Cursor Trail

Cross browser cursor trailer script

By Web Tech Online ([email protected])

B=document.all;

C=document.layers;

T1=new Array("trail1.gif",38,35,"trail2.gif",30,31,"trail3.gif",28,26,"trail4.gif",22,21,"trail5.gif",16,16,"trail6.gif",10,10)

nos=parseInt(T1.length/3)

rate=50

ie5fix1=0;

ie5fix2=0;

for (i=0;i<nos;i++){

createContainer("CUR"+i,i*10,i*10,i*3+1,i*3+2,"","<img src='"+T1[i*3]+"' width="+T1[(i*3+1)]+" height="+T1[(i*3+2)]+" border=0>")}

function createContainer(N,Xp,Yp,W,H,At,HT,Op,St){

with (document){

write((!B) ? "<layer id='"+N+"' left="+Xp+" top="+Yp+" width="+W+" height="+H : "<div id='"+N+"'"+" style='position:absolute;left:"+Xp+"; top:"+Yp+"; width:"+W+"; height:"+H+"; ");

if(St){

if (C)

write(" style='");

write(St+";' ")

}

else write((B)?"'":"");

write((At)? At+">" : ">");

write((HT) ? HT : "");

if (!Op)

closeContainer(N)

}

function closeContainer(){

document.write((B)?"</div>":"</layer>")

}

function getXpos(N){

return (B) ? parseInt(B[N].style.left) : C[N].left

}

function getYpos(N){

return (B) ? parseInt(B[N].style.top) : C[N].top

}

function moveContainer(N,DX,DY){

c=(B) ? B[N].style :C[N];c.left=DX;c.top=DY

}

function cycle(){

//if (IE5)

if (document.all&&window.print){

ie5fix1=document.body.scrollLeft;

ie5fix2=document.body.scrollTop;

}

for (i=0;i<(nos-1);i++){

moveContainer("CUR"+i,getXpos("CUR"+(i+1)),getYpos("CUR"+(i+1)))

}

function newPos(e){

moveContainer("CUR"+(nos-1),(B)?event.clientX+ie5fix1:e.pageX+2,(B)?event.clientY+ie5fix2:e.pageY+2

)

}

if(document.layers)

document.captureEvents(Event.MOUSEMOVE)

document.onmousemove=newPos

setInterval("cycle()",rate)

</script>

Drop Down Text

3 parts to this script

=======================================================

part 1

=======================================================

<!--

/*This script created by Web Tech Online

It may be used freely as long as this message remains

http://www.fortunecity.com/skyscraper/online/1501

browser = (((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 3 )) || ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 )))

ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 ))

ns4 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4 ))

if (ns4) {

layerRef="document.layers";

styleRef="";

} else {

layerRef="document.all";

styleRef=".style";

}

function moveText(which, start, finish, step, speed){

if (ie4 || ns4){

if (start < finish){

eval(layerRef + '["' + which +'"]' + styleRef + '.top = start');

start=start+step;

setTimeout("moveText('"+which+"',"+start+","+finish+","+step+","+speed+")",speed);

}

//-->

</script>

===========================================================

part 2 - enter your text, status text, links etc here

============================================================

<DIV id=text style="position: absolute; top: -100; left: 50%; z-index: 0"><table border=0><tr><td ALIGN=CENTER><font face="Helvetica" size=-1 color="#00ff00"><a><b>Welcome To</b></a><br><a href="http://www.fortunecity.com/skyscraper/online/1501" ONMOUSEOVER="window.status='Web Tech Online';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()"><b>A1 JavaScripts</b></a></font></td></tr></table></div>

====================================================================

part 3 - in the brackets will alter your drop down start point and speed etc.

====================================================================

<body onload="moveText('text',-180,220,2,2)">

Dynamic Clock

3 parts to this script

=======================================================

part 1 - align your clock here.

========================================================

<span id="dynamicclock" style="position:absolute;left:200;top:250;">

</span>

========================================================

part 2

==========================================================

<!--

//dynamic clock from Web Tech Online (http://www.fortunecity.com/skyscraper/online/1501)

//submitted causing errors and corrected

//all credit to Web Tech Online

function theclock(){

if (!document.layers&&!document.all)

return

Digital=new Date()

hours=Digital.getHours()

minutes=Digital.getMinutes()

seconds=Digital.getSeconds()

dn="AM"

if (hours>12){

dn="PM"

hours=hours-12

}

if (hours==0)

hours=12

if (minutes<=9)

minutes="0"+minutes

if (seconds<=9)

seconds="0"+seconds

goclock="<font size='-1' face='Arial' ><font size='-1'>The Time Now Is: </font><b>"+hours+":"+minutes+":"

+seconds+" "+dn+"</b></font>"

if (document.layers){

document.layers.dynamicclock.document.write(goclock)

document.layers.dynamicclock.document.close()

}

else if (document.all)

dynamicclock.innerHTML=goclock

setTimeout("theclock()",1000)

}

//-->

</script>

=============================================================

part 3

=============================================================

<body onLoad="theclock()">

Entry Transfer

2 parts to this script

part 1

=================================================

<style>

<!--

.intro{

position:absolute;

left:0;

top:0;

layer-background-color:#000000;

background-color:#000000;

border:0.1px #000000

}

-->

</style>

====================================

part 2

===========================================

<div id="i1" class="intro"></div><div id="i2" class="intro"></div><div id="i3" class="intro"></div><div id="i4" class="intro"></div><div id="i5" class="intro"></div><div id="i6" class="intro"></div><div id="i7" class="intro"></div><div id="i8" class="intro"></div>

//by Web Tech Online (http://www.fortunecity.com/skyscraper/online/1501)

//cross browser entry transition script

var speed=20

var temp=new Array()

var temp2=new Array()

if (document.layers){

for (i=1;i<=8;i++){

temp[i]=eval("document.i"+i+".clip")

temp2[i]=eval("document.i"+i)

temp[i].width=window.innerWidth

temp[i].height=window.innerHeight/8

temp2[i].top=(i-1)*temp[i].height

}

else if (document.all){

var clipright=document.body.clientWidth,clipleft=0

for (i=1;i<=8;i++){

temp[i]=eval("document.all.i"+i+".style")

temp[i].width=document.body.clientWidth

temp[i].height=document.body.offsetHeight/8

temp[i].top=(i-1)*parseInt(temp[i].height)

}

function openit(){

window.scrollTo(0,0)

if (document.layers){

for (i=1;i<=8;i=i+2)

temp[i].right-=speed

for (i=2;i<=8;i=i+2)

temp[i].left+=speed

if (temp[2].left>window.innerWidth)

clearInterval(stopit)

}

else if (document.all){

clipright-=speed

for (i=1;i<=8;i=i+2){

temp[i].clip="rect(0 "+clipright+" auto 0)"

}

clipleft+=speed

for (i=2;i<=8;i=i+2){

temp[i].clip="rect(0 auto auto "+clipleft+")"

}

if (clipright<=0)

clearInterval(stopit)

}

function gogo(){

stopit=setInterval("openit()",100)

}

gogo()

</script>

Falling Image

3 parts to this script

======================================================

part 1

=====================================================

<!--

/*This script created by Web Tech Online (http://www.fortunecity.com/skyscraper/online/1501) in non-working condition and corrected, all credit to Web Tech Online. Please keep this message in place if using this script

browser = (((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 3 )) || ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 )))

ie4 = ((navigator.appName == "Microsoft Internet Explorer") && (parseInt(navigator.appVersion) >= 4 ))

ns4 = ((navigator.appName == "Netscape") && (parseInt(navigator.appVersion) >= 4 ))

if (ns4) {

layerRef="document.layers";

styleRef="";

} else {

layerRef="document.all";

styleRef=".style";

}

function moveSaturn(which, start, finish, step, speed){

if (ie4 || ns4){

if (start < finish){

eval(layerRef + '["' + which +'"]' + styleRef + '.top = start');

start=start+step;

setTimeout("moveSaturn('"+which+"',"+start+","+finish+","+step+","+speed+")",speed);

}

//-->

</script>

==========================================================

part 2 - enter your image, size and alt tags

===============================================================

<DIV id=saturn style="position: absolute; top: -100; left: 30%; z-index: 0"><IMG alt="dhtml" src="java-ace1.gif" border=0 width=88 height=31></div>

===========================================================

part 3

============================================================

<body onload="moveSaturn('saturn',-180,220,3,3)">

Fixed Image Background

if (document.all)

document.body.style.cssText="background:white url(xxcastleback.gif) no-repeat fixed center center"

//-script by Web Tech Online, more scripts at http://www.fortunecity.com/skyscraper/online/1501-//

</script>

Floating Image

3 parts to this script

================================================

part 1

==================================================

<!-- Hide from older browsers

//floating image script by Web Tech Online

//http://www.fortunecity.com/skyscraper/online/1501

//please keep this credit in if you are using this script

var timerFimage;

var speedFimage = 2;

Hdir = 1;

Vdir = 1;

sta = false;

var dialogWidth = 600;

var dialogHeight = 400;

function way()

{

if(navigator.appName == "Netscape")

{

z = document.layers["layer1"]

if(z.top < 0)

{

Vdir = 1;

}

else

{

if (z.top > dialogHeight)

{

Vdir = -1;

}

if(z.left < 0)

{

Hdir = 1;

}

if (z.left > dialogWidth)

{

Hdir = -1;

}

z.top += Vdir * speedFimage;

z.left += Hdir * speedFimage;

}

else

{

z = document.all["layer1"]

if(z.style.posTop < 0)

{

Vdir = 1;

}

else

{

if (z.style.posTop > dialogHeight)

{

Vdir = -1;

}

if(z.style.posLeft < 0)

{

Hdir = 1;

}

if (z.style.posLeft > dialogWidth)

{

Hdir = -1;

}

z.style.posTop += Vdir * speedFimage;

z.style.posLeft += Hdir * speedFimage;

}

function stop()

{

if(navigator.appName == "Netscape")

{

z = document.layers["layer1"]

sta = !sta

if(sta)

{

Hdir = 0;

Vdir = 0;

}

else

{

Hdir = 1;

Vdir = 1;

}

else

{

z = document.all["layer1"]

sta = !sta

if(sta)

{

Hdir = 0;

Vdir = 0;

}

else

{

Hdir = 1;

Vdir = 1;

}

function start()

{

timerFimage = setInterval(way,200)

}

if(navigator.appName == "Netscape")

{

window.onMouseDown = stop

window.captureEvents(Event.MOUSEDOWN)

}

// -->

</script>

=============================================

part 2

====================================================

==============================================

part 3 insert your image here

===============================================

<div id="layer1" style="position: absolute; left: 100; top: 0"><IMG SRC="genie1.gif" BORDER="0" alt="Click to stop me! Click again and I'll move" width="128" height="128"></div>

Image Curtain

3 parts to this script

===========================================

part 1

=============================================================

//this script may be used freely as long as the next 2 lines are left in

//this script created by Web Tech Online

//http://www.fortunecity.com/skyscraper/online/1501

<!--

counter = 0;

function slideIt()

{

if (document.all)

{ banner.style.clip = "rect(0," + counter + ",60,0)"; }

if (document.layers)

{ document.banner.clip.top = 0;

document.banner.clip.right = counter;

document.banner.clip.bottom = 60;

document.banner.clip.left = 0; }

counter += 2;

time_out = setTimeout("slideIt()", 50);

if (counter >= 468)

{ clearTimeout(time_out); }

}

// -->

</script>

===================================================

part 2

=====================================================

==========================================================

part 3 - enter your position, status bar text, image , size etc here

=========================================================

Image Viewer

3 parts to this script

=====================================

part 1

=======================================

//By Web Tech Online - http://www.fortunecity.com/skyscraper/online/1501

//please retain this message if using this script

//hundreds of scripts to ehance your site at Web Tech Online

<!--//

//pre load your image in here

newimage0 = new Image();

newimage0.src = "image1.jpg";

newimage1 = new Image();

newimage1.src = "image2.jpg";

newimage2 = new Image();

newimage2.src = "image3.jpg";

newimage3 = new Image();

newimage3.src = "image4.jpg";

newimage4 = new Image();

newimage4.src = "image5.jpg";

var i_strngth=1

var i_image=0

//enter your image urls here

var imageurl = new Array()

imageurl[0] ="image1.jpg"

imageurl[1] ="image2.jpg"

imageurl[2] ="image3.jpg"

imageurl[3] ="image4.jpg"

imageurl[3] ="image5.jpg"

function showimage() {

if(document.all) {

if (i_strngth <=110) {

testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")' src="+imageurl[i_image]+" border=0>";i_strngth=i_strngth+10

var timer=setTimeout("showimage()",100)

}

else {

clearTimeout(timer)

var timer=setTimeout("hideimage()",10)

}

if(document.layers) {

clearTimeout(timer)

document.testimage.document.write("<img src="+imageurl[i_image]+" border=0>")

document.close()

i_image++

if (i_image >= imageurl.length)

{i_image=0}

var timer=setTimeout("showimage()",10000)

}

function hideimage() {

if (i_strngth >=-10) {

testimage.innerHTML="<img style='filter:alpha(opacity="+i_strngth+")'src="+imageurl[i_image]+" border=0>";

i_strngth=i_strngth-10

var timer=setTimeout("hideimage()",10)

}

else {

clearTimeout(timer)

i_image++

if (i_image >= imageurl.length) {i_image=0}

i_strngth=1

var timer=setTimeout("showimage()",200)

}

//-->

</script>

====================================================================

part 2

==================================================================

==============================================================

part 3 - adjust your image placement in this part top: xxxpx left: xxxpx

===========================================================

<div id="testimage" style="position:absolute;visibility:visible;top:270px;left:490px;"></div>

Magic Balls

4 parts to this script

===================================================

part 1

===================================================

.ball {

height: 16px;

position: absolute;

visibility: hidden;

width: 16px;

}

</style>

====================================================

part 2

====================================================

//Script created by Web Tech Online ([email protected])

//http://www.fortunecity.com/skyscraper/online/1501

//please leave these credits in when using this script

//ENTER YOUR URL TO THE BALLS HERE

<!-- Begin

var dir = "http://www.YOUR-BALLS-DIRECTORY/balls/";

// Extract the images then upload the balls to your server and

// change the 'dir' variable to their location (end with a '/')

var images = new Array(

dir+"balldl.gif",

dir+"balldn.gif",

dir+"balldr.gif",

dir+"balllt.gif",

dir+"ballrt.gif",

dir+"ballul.gif",

dir+"ballup.gif",

dir+"ballur.gif"

);

var isMinNS4 = (document.layers) ? 1 : 0;

var isMinIE4 = (document.all) ? 1 : 0;

var _LBimgList;

var _LBimgCount;

var _LBbase = "LBbase";

var _LBlow = "LBlow";

var _LBhigh = "LBhigh";

var _LBwidth;

var _LBheight;

var _LBbaseLayer;

var _LBlowLayer;

var _LBhighLayer;

function createLoadBar(width, height, bdSize, bdColor, bgColor, fgColor, fontFace, fontSize, text) {

var txtLow, txtHigh, tblStart, tblEnd;

var str;

txtLow = '<font color="' + fgColor + '" face="' + fontFace + '" size=' + fontSize + '>' + text + '</font>';

txtHigh = '<font color="' + bgColor + '" face="' + fontFace + '" size=' + fontSize + '>' + text + '</font>';

tblStart = '<table border=0 cellpadding=0 cellspacing=0 height=100% width=100%><tr valign="center"><td align="center">';

tblEnd = '</td></tr></table>';

if (isMinNS4)

str = '<layer name="' + _LBbase + '" bgcolor="' + bdColor + '" width=' + width + ' height=' + height + ' visibility="hide">\n'

+ ' <layer name="' + _LBlow + '" bgcolor="' + bgColor + '" left=' + bdSize + ' top=' + bdSize + ' width=' + (width - 2 * bdSize) + ' height=' + (height - 2 * bdSize) + '>' + tblStart + txtLow + tblEnd + '</layer>\n'

+ ' <layer name="' + _LBhigh + '" bgcolor="' + fgColor + '" left=' + bdSize + ' top=' + bdSize + ' width=' + (width - 2 * bdSize) + ' height=' + (height - 2 * bdSize) + '>' + tblStart + txtHigh + tblEnd + '</layer>\n'

+ '</layer>';

if (isMinIE4)

str = '<div id="' + _LBbase + '" style="position:absolute; background-color:' + bdColor + '; width:' + width + 'px; height:' + height + 'px; visibility:hidden;">\n'

+ ' <div id="' + _LBlow + '" style="position:absolute; background-color=' + bgColor + '; left:' + bdSize + 'px; top:' + bdSize + 'px; width:' + (width - 2 * bdSize) + 'px; height:' + (height - 2 * bdSize) + 'px;">' + tblStart + txtLow + tblEnd + '</div>\n'

+ ' <div id="' + _LBhigh + '" style="position:absolute; background-color=' + fgColor + '; left:' + bdSize + 'px; top:' + bdSize + 'px; width:' + (width - 2 * bdSize) + 'px; height:' + (height - 2 * bdSize) + 'px;">' + tblStart + txtHigh + tblEnd + '</div>\n'

+ '</div>';

document.writeln(str);

_LBwidth = width - 2 * bdSize;

_LBheight = height - 2 * bdSize;

}

function startLoadBar(srcList, x, y) {

var i, w, h;

if (isMinNS4) {

_LBbaseLayer = document.layers[_LBbase];

_LBlowLayer = _LBbaseLayer.document.layers[_LBlow];

_LBhighLayer = _LBbaseLayer.document.layers[_LBhigh];

}

if (isMinIE4) {

_LBbaseLayer = eval('document.all.' + _LBbase);

_LBlowLayer = eval('document.all.' + _LBlow);

_LBhighLayer = eval('document.all.' + _LBhigh);

}

if (isMinNS4) {

w = window.innerWidth;

h = window.innerHeight;

}

if (isMinIE4) {

w = document.body.clientWidth;

h = document.body.clientHeight;

}

if (x == null)

x = Math.round((w - _LBwidth) / 2);

if (y == null)

y = Math.round((h - _LBheight) / 2);

moveLayerTo(_LBbaseLayer, x, y);

clipLayer(_LBhighLayer, 0, 0, 0, _LBheight);

showLayer(_LBbaseLayer);

_LBimgCount = 0;

_LBimgList = new Array();

for (i = 0; i < srcList.length; i++) {

_LBimgList[i] = new Image();

_LBimgList[i].onabort = _LBupdate;

_LBimgList[i].onerror = _LBupdate;

_LBimgList[i].onload = _LBupdate;

}

for (i = 0; i < srcList.length; i++)

_LBimgList[i].src = srcList[i];

}

function endLoadBar() { // empty (can be changed) function called when finished

}

function _LBupdate() {

var pct;

_LBimgCount++;

pct = _LBimgCount / _LBimgList.length;

clipLayer(_LBhighLayer, 0, 0, Math.round(pct * _LBwidth), _LBheight);

if (_LBimgCount == _LBimgList.length) {

setTimeout('hideLayer(_LBbaseLayer)', 500);

endLoadBar();

}

function moveLayerTo(layer, x, y) {

if (isMinNS4)

layer.moveTo(x, y);

if (isMinIE4) {

layer.style.left = x;

layer.style.top = y;

}

function hideLayer(layer) {

if (isMinNS4)

layer.visibility = "hide";

if (isMinIE4)

layer.style.visibility = "hidden";

}

function getWindowWidth() {

if (isMinNS4)

return(window.innerWidth);

if (isMinIE4)

return(document.body.offsetWidth);

return(-1);

}

function getWindowHeight() {

if (isMinNS4)

return(window.innerHeight);

if (isMinIE4)

return(document.body.offsetHeight);

return(-1);

}

function getPageScrollX() {

if (isMinNS4)

return(window.pageXOffset);

if (isMinIE4)

return(document.body.scrollLeft);

return(-1);

}

function getPageScrollY() {

if (isMinNS4)

return(window.pageYOffset);

if (isMinIE4)

return(document.body.scrollTop);

return(-1);

}

function getHeight(layer) {

if (isMinNS4) {

if (layer.document.height)

return(layer.document.height);

else

return(layer.clip.bottom - layer.clip.top);

}

if (isMinIE4) {

if (false && layer.style.pixelHeight)

return(layer.style.pixelHeight);

else

return(layer.clientHeight);

}

return(-1);

}

function getWidth(layer) {

if (isMinNS4) {

if (layer.document.width)

return(layer.document.width);

else

return(layer.clip.right - layer.clip.left);

}

if (isMinIE4) {

if (layer.style.pixelWidth)

return(layer.style.pixelWidth);

else

return(layer.clientWidth);

}

return(-1);

}

function getLeft(layer) {

if (isMinNS4)

return(layer.left);

if (isMinIE4)

return(layer.style.pixelLeft);

return(-1);

}

function getTop(layer) {

if (isMinNS4)

return(layer.top);

if (isMinIE4)

return(layer.style.pixelTop);

return(-1);

}

function getRight(layer) {

if (isMinNS4)

return(layer.left + getWidth(layer));

if (isMinIE4)

return(layer.style.pixelLeft + getWidth(layer));

return(-1);

}

function getBottom(layer) {

if (isMinNS4)

return(layer.top + getHeight(layer));

else if (isMinIE4)

return(layer.style.pixelTop + getHeight(layer));

return(-1);

}

function moveLayerBy(layer, dx, dy) {

if (isMinNS4)

layer.moveBy(dx, dy);

if (isMinIE4) {

layer.style.pixelLeft += dx;

layer.style.pixelTop+= dy;

}

function showLayer(layer) {

if (isMinNS4)

layer.visibility = "show";

if (isMinIE4)

layer.style.visibility = "visible";

}

function clipLayer(layer, clipleft, cliptop, clipright, clipbottom) {

if (isMinNS4) {

layer.clip.left = clipleft;

layer.clip.top= cliptop;

layer.clip.right= clipright;

layer.clip.bottom = clipbottom;

}

if (isMinIE4)

layer.style.clip = 'rect(' + cliptop + ' ' +clipright + ' ' + clipbottom + ' ' + clipleft +')';

}

var mouseX = 0;

var mouseY = 0;

if (isMinNS4)

document.captureEvents(Event.MOUSEMOVE);

document.onmousemove = getMousePosition;

function init() {

startLoadBar(images);

}

function getMousePosition(e) {

if (isMinNS4) {

mouseX = e.pageX;

mouseY = e.pageY;

}

if (isMinIE4) {

mouseX = event.clientX + document.body.scrollLeft;

mouseY = event.clientY + document.body.scrollTop;

}

return true;

}

var balls = new Array(8);

function endLoadBar() {

var i;

for (i = 0; i < balls.length; i++) {

if (isMinNS4) {

balls[i] = document.layers["ball" + (i + 1)];

balls[i].image = balls[i].document.images["ballimg" + (i + 1)];

}

if (isMinIE4) {

balls[i] = eval('document.all.ball' + (i + 1));

balls[i].image = document.images["ballimg" + (i + 1)];

}

initBall(i);

showLayer(balls[i]);

}

updateBalls();

}

function initBall(n) {

var s, x, y;

x = Math.floor(Math.random() * getWindowWidth());

y = Math.floor(Math.random() * getWindowHeight());

s = Math.floor(Math.random() * 4);

if (s == 0)

x = -getWidth(balls[n]);

if (s == 1)

x = getWindowWidth();

if (s == 2)

y = -getHeight(balls[n]);

if (s == 3)

y = getWindowHeight();

x += getPageScrollX();

y += getPageScrollY();

moveLayerTo(balls[n], x, y);

}

function updateBalls() {

var i, dx, dy, theta, d;

d = 3;

for (i = 0; i < balls.length; i++) {

dx = mouseX - getLeft(balls[i]);

dy = mouseY - getTop(balls[i]);

theta = Math.round(Math.atan2(-dy, dx) * 180 / Math.PI);

if (theta < 0)

theta += 360;

if (Math.abs(dx) < d && Math.abs(dy) < d)

initBall(i);

else if (theta > 22.5 && theta <= 67.5) {

moveLayerBy(balls[i], d, -d);

balls[i].image.src = dir+"ballur.gif";

}

else if (theta > 67.5 && theta <= 112.5) {

moveLayerBy(balls[i], 0, -d);

balls[i].image.src = dir+"ballup.gif";

}

else if (theta > 112.5 && theta <= 157.5) {

moveLayerBy(balls[i], -d, -d);

balls[i].image.src = dir+"ballul.gif";

}

else if (theta > 157.5 && theta <= 202.5) {

moveLayerBy(balls[i], -d, 0);

balls[i].image.src = dir+"balllt.gif";

}

else if (theta > 202.5 && theta <= 247.5) {

moveLayerBy(balls[i], -d, d);

balls[i].image.src = dir+"balldl.gif";

}

else if (theta > 247.5 && theta <= 292.5) {

moveLayerBy(balls[i], 0, d);

balls[i].image.src = dir+"balldn.gif";

}

else if (theta > 292.5 && theta <= 337.5) {

moveLayerBy(balls[i], d, d);

balls[i].image.src = dir+"balldr.gif";

}

else {

moveLayerBy(balls[i], d, 0);

balls[i].image.src = dir+"ballrt.gif";

}

setTimeout('updateBalls()', 50);

return;

}

// End -->

</script>

===========================================================

part 3

===========================================================

===========================================================

part 4

===========================================================

createLoadBar(300, 20, 1, "#000000", "#cccccc", "#999999", "MS Sans serif,Arial,Helvetica", 1, "<b>Stand By... Loading Magic Balls, please wait...</b>");

</script>

D Marquee 1

2 parts to this script

==========================================================

part 1

=========================================================

//script by Web Tech Online (www.fortunecity.com/skyscraper/online/1501) based on tutorial at

//123webmaster.com - dhtml scrollers

//please leave this message intact if using this script

//Specify the marquee's width (in pixels)

var marqueewidth=330

//Specify the marquee's height (in pixels, pertains only to NS)

var marqueeheight=20

//Specify the marquee's scroll speed (larger is faster)

var speed=6

//Specify the marquee contents

var marqueecontents='<font face="Arial"><strong><big>Thank you for visiting <a href="http://www.fortunecity.com/skyscraper/online/1501">Web Tech Online.</a> If you find these scripts useful, please consider linking to Web Tech Online.</a> Enjoy your stay!</big></strong></font>'

if (document.all)

document.write('<marquee scrollAmount='+speed+' style="width:'+marqueewidth+'">'+marqueecontents+'</marquee>')

function regenerate(){

window.location.reload()

}

function regenerate2(){

if (document.layers){

setTimeout("window.onresize=regenerate",450)

intializemarquee()

}

function intializemarquee(){

document.cmarquee01.document.cmarquee02.document.write('<nobr>'+marqueecontents+'</nobr>')

document.cmarquee01.document.cmarquee02.document.close()

thelength=document.cmarquee01.document.cmarquee02.document.width

scrollit()

}

function scrollit(){

if (document.cmarquee01.document.cmarquee02.left>=thelength*(-1)){

document.cmarquee01.document.cmarquee02.left-=speed

setTimeout("scrollit()",100)

}

else{

document.cmarquee01.document.cmarquee02.left=marqueewidth

scrollit()

}

window.onload=regenerate2

</script>

===================================================

part 2

===================================================

<ilayer width=&{marqueewidth}; height=&{marqueeheight}; name="cmarquee01">

</ilayer>

D Marquee 2

2 parts to this script

==========================================================

part 1

========================================================

Cross browser marquee script II-

Web Tech Online (www.fortunecity.com/skyscraper/online/1501)

For full source code, installation instructions,

100's more DHTML scripts, and Terms Of

Use, visit www.fortunecity.com/skyscraper/online/1501

//Specify the marquee's width (in pixels)

var marqueewidth=150

//Specify the marquee's height

var marqueeheight=150

//Specify the marquee's scroll speed (larger is faster)

var speed=2

//Specify the marquee contents

var marqueecontents='<font face="Arial"><strong><big>Thank you for visiting <a href="http://www.fortunecity.com/skyscraper/online/1501">Web Tech Online.</a> If you find this script useful, please remember to give credit to the maker!</big></strong></font>'

if (document.all)

document.write('<marquee direction="up" scrollAmount='+speed+' style="width:'+marqueewidth+';height:'+marqueeheight+'">'+marqueecontents+'</marquee>')

function regenerate(){

window.location.reload()

}

function regenerate2(){

if (document.layers){

setTimeout("window.onresize=regenerate",450)

intializemarquee()

}

function intializemarquee(){

document.cmarquee01.document.cmarquee02.document.write(marqueecontents)

document.cmarquee01.document.cmarquee02.document.close()

thelength=document.cmarquee01.document.cmarquee02.document.height

scrollit()

}

function scrollit(){

if (document.cmarquee01.document.cmarquee02.top>=thelength*(-1)){

document.cmarquee01.document.cmarquee02.top-=speed

setTimeout("scrollit()",100)

}

else{

document.cmarquee01.document.cmarquee02.top=marqueeheight

scrollit()

}

window.onload=regenerate2

</script>

======================================================

part 2

=======================================================

<ilayer width=&{marqueewidth}; height=&{marqueeheight}; name="cmarquee01">

</ilayer>

D Message Scroller

Pausing updown message scroller-

Last updated: 01/01/00 (Bugs fixed, ability to specify background image for scroller)

Web Tech Online (www.fortunecity.com/skyscraper/online/1501)

For full source code, installation instructions,

100's more DHTML scripts, and Terms Of

Use, visit: www.fortunecity.com/skyscraper/online/1501

//configure the below five variables to change the style of the scroller

var scrollerwidth=200

var scrollerheight=120

var scrollerbgcolor='#c0c0c0'

//set below to '' if you don't wish to use a background image

var scrollerbackground=''

//configure the below variable to change the contents of the scroller

var messages=new Array()

messages[0]="<font face='Arial'><a>Welcome To Web Tech Online</a></font>"

messages[1]="<font face='Arial'><a>This is an example of the message scroller script</a></font>"

messages[2]="<font face='Arial'><a>Links Can Also Be Used In The Script</a></font>"

messages[3]="<font face='Arial'><a>Like This</a><br><a href='http://www.fortunecity.com/skyscraper/online/1501'>Web Tech Online</a></font>"

messages[4]="<font face='Arial'><a>And There you have it, download it below and customize it all you wish. But remember to give credit to the script maker by leaving their messages intact.</a></font>"

///////Do not edit pass this line///////////////////////

if (messages.length>1)

i=2

else

i=0

function move1(whichlayer){

tlayer=eval(whichlayer)

if (tlayer.top>0&&tlayer.top<=5){

tlayer.top=0

setTimeout("move1(tlayer)",3000)

setTimeout("move2(document.main.document.second)",3000)

return

}

if (tlayer.top>=tlayer.document.height*-1){

tlayer.top-=5

setTimeout("move1(tlayer)",100)

}

else{

tlayer.top=scrollerheight

tlayer.document.write(messages[i])

tlayer.document.close()

if (i==messages.length-1)

i=0

else

i++

}

function move2(whichlayer){

tlayer2=eval(whichlayer)

if (tlayer2.top>0&&tlayer2.top<=5){

tlayer2.top=0

setTimeout("move2(tlayer2)",3000)

setTimeout("move1(document.main.document.first)",3000)

return

}

if (tlayer2.top>=tlayer2.document.height*-1){

tlayer2.top-=5

setTimeout("move2(tlayer2)",100)

}

else{

tlayer2.top=scrollerheight

tlayer2.document.write(messages[i])

tlayer2.document.close()

if (i==messages.length-1)

i=0

else

i++

}

function move3(whichdiv){

tdiv=eval(whichdiv)

if (tdiv.style.pixelTop>0&&tdiv.style.pixelTop<=5){

tdiv.style.pixelTop=0

setTimeout("move3(tdiv)",3000)

setTimeout("move4(second2)",3000)

return

}

if (tdiv.style.pixelTop>=tdiv.offsetHeight*-1){

tdiv.style.pixelTop-=5

setTimeout("move3(tdiv)",100)

}

else{

tdiv.style.pixelTop=scrollerheight

tdiv.innerHTML=messages[i]

if (i==messages.length-1)

i=0

else

i++

}

function move4(whichdiv){

tdiv2=eval(whichdiv)

if (tdiv2.style.pixelTop>0&&tdiv2.style.pixelTop<=5){

tdiv2.style.pixelTop=0

setTimeout("move4(tdiv2)",3000)

setTimeout("move3(first2)",3000)

return

}

if (tdiv2.style.pixelTop>=tdiv2.offsetHeight*-1){

tdiv2.style.pixelTop-=5

setTimeout("move4(second2)",100)

}

else{

tdiv2.style.pixelTop=scrollerheight

tdiv2.innerHTML=messages[i]

if (i==messages.length-1)

i=0

else

i++

}

function startscroll(){

if (document.all){

move3(first2)

second2.style.top=scrollerheight

second2.style.visibility='visible'

}

else if (document.layers){

document.main.visibility='show'

move1(document.main.document.first)

document.main.document.second.top=scrollerheight+5

document.main.document.second.visibility='show'

}

window.onload=startscroll

</script>

if (document.layers)

document.write(messages[0])

</script>

</layer>

if (document.layers)

document.write(messages[1])

</script>

</layer>

</ilayer>

if (document.all){

document.writeln('<span id="main2" style="position:relative;width:'+scrollerwidth+';height:'+scrollerheight+';overflow:hiden;background-color:'+scrollerbgcolor+' ;background-image:url('+scrollerbackground+')">')

document.writeln('<div style="position:absolute;width:'+scrollerwidth+';height:'+scrollerheight+';clip:rect(0 '+scrollerwidth+' '+scrollerheight+' 0);left:0;top:0">')

document.writeln('<div id="first2" style="position:absolute;width:'+scrollerwidth+';left:0;top:1;">')

document.write(messages[0])

document.writeln('</div>')

document.writeln('<div id="second2" style="position:absolute;width:'+scrollerwidth+';left:0;top:0;visibility:hidden">')

document.write(messages[1])

document.writeln('</div>')

document.writeln('</span>')

}

</script>

Mouse Orbiter

<!--

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

Original script by Web Tech Online, 2000

May be copied freely, please leave authors name unchanged.

xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx

variables:

orbitstyle : div style (IE)

orbitlayer : layer style (NAV)

orbitFont : layer font-family (NAV)

orbitFontSize : layer font-size (NAV)

step = orbit-speed in degrees (380/step = speed)

om_x = X -> size of circle

om_y = Y -> size of circle

(if om_x = om_y: shape=circle, else shape = elipse)

f = startingpoint (degrees) on circle

timerDelay = delay for setTimeout

x_bias = compensation X ; see .orbitstyle (id=orbit) width/height!

y_bias = compensation Y ; see .orbitstyle (id=orbit) width/height!

orbitText = text incl. HTML tags (may include <IMG ...)

//enter your image or text in this part

var orbitText = '<center><a href="http://www.fortunecity.com/skyscraper/online/1501/"><b>Web Tech Online</b><br><br><img src="^world_spinning_2.gif" width="88" height="31" border="0"></a><br>For the best JavaScripts.</center>';

//adjust your font face and size here

var orbitstyle = 'position: absolute; visibility:visible; font-family:Arial; font-size:11px; width=150px; height=100px; top:-200px; left:-200px; z-index:1;'

var orbitlayer = 'top=-200 left=-200 width=150 height=100 visibility="show"'

var orbitFont = 'Arial, Helvetica';

var orbitFontSize = '11px';

var step = 3;

var om_x = 85;

var om_y = 48;

var x_bias = 65;

var y_bias = 23;

timerDelay = 2;

var timer; var a; var b; var ax; var ay; var x; var y; var f = 0;

// this handles the onmouseover event

function handle(ev)

{

clearTimeout(timer);

x = (document.layers) ? ev.pageX : event.clientX

y = (document.layers) ? ev.pageY : event.clientY

timer = setTimeout("turn()",1)

return true;

}

// this sets the X/Y positions of the orbit-DIV

function turn()

{

if (f>360) {f = 0}

//niftyMath(tm)

a = Math.sin(f/180*3.1415);

b = Math.cos(f/180*3.1415);

ax = (x - x_bias) + (om_x * a)

ay = (y - y_bias) + (om_y * b)

if (document.all)

{

document.all.orbit.style.posLeft = ax;

document.all.orbit.style.posTop = ay;

}

else

{

document.orbit.moveToAbsolute(ax,ay);

}

f += step;

timer=setTimeout("turn()",timerDelay);

}

//-->

</script>

if (document.layers) {window.captureEvents(Event.MOUSEMOVE); window.onmousemove = handle; }

else { document.onmousemove = handle; }

if (document.layers) {

document.write('<layer id="orbit" ')

document.write(orbitlayer)

document.ids.orbit.fontFamily=orbitFont;

document.ids.orbit.fontSize=orbitFontSize;

}

else {

document.write('<div id="orbit" ')

document.write('style="' + orbitstyle + '">') }

document.write('<p align="center">' + orbitText + '</p>')

if (document.layers) {

document.write('</layer>') }

else {

document.write('</div>') }

//-->

</script>

Page Loading

3 parts to this script

=============================================

part 1

=============================================

#divLoadCont{position:absolute; width:100%; height:98%; top:0; left:0; background-color:white; layer-background-color:white; font-family:arial,helvetica; z-index:100}

</style>

===============================================

part 2

===============================================

This script is made by and copyrighted to Earl P. Figgeroa at http://www.fortunecity.com/skyscraper/online/1501

Visit for more great scripts. This may be used freely as long as this message is intact!

I appreciate any links you could give me.

//Default browsercheck, added to all scripts!

function checkBrowser(){

this.ver=navigator.appVersion

this.dom=document.getElementById?1:0

this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0;

this.ie4=(document.all && !this.dom)?1:0;

this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0;

this.ns4=(document.layers && !this.dom)?1:0;

this.bw=(this.ie5 || this.ie4 || this.ns4 || this.ns5)

return this

}

bw=new checkBrowser()

//Hides the div

function hideIt(div){

if(bw.bw){

div="divLoadCont"

obj=bw.dom?document.getElementById(div).style:bw.ie4?document.all[div].style:bw.ns4?document[div]:0;

obj.visibility='hidden'

}

onload=hideIt;

</script>

============================================================

part 3

============================================================

//We write the table and the div to hide the content out, so older browsers won't see it

if(bw.bw) document.write('<div id="divLoadCont"><table width="100%" height="95%" align="center" valign="middle"><tr><td width="100%" height="100%" align="center" valign="middle"><h3>Loading Page....</h3></td></tr></table></div>')

</script>

Rain

<!-- Begin

var no = 50;

var speed = 1;

var ns4up = (document.layers) ? 1 : 0;

var ie4up = (document.all) ? 1 : 0;

var s, x, y, sn, cs;

var a, r, cx, cy;

var i, doc_width = 800, doc_height = 600;

if (ns4up) {

doc_width = self.innerWidth;

doc_height = self.innerHeight;

}

else

if (ie4up) {

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

x = new Array();

y = new Array();

r = new Array();

cx = new Array();

cy = new Array();

s = 8;

for (i = 0; i < no; ++ i) {

initRain();

if (ns4up) {

if (i == 0) {

document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");

document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">");

document.write(",</font></layer>");

}

else {

document.write("<layer name=\"dot"+ i +"\" left=\"1\" ");

document.write("top=\"1\" visibility=\"show\"><font color=\"blue\">");

document.write(",</font></layer>");

}

else

if (ie4up) {

if (i == 0) {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");

document.write(",</font></div>");

}

else {

document.write("<div id=\"dot"+ i +"\" style=\"POSITION: ");

document.write("absolute; Z-INDEX: "+ i +"; VISIBILITY: ");

document.write("visible; TOP: 15px; LEFT: 15px;\"><font color=\"blue\">");

document.write(",</font></div>");

}

function initRain() {

a = 6;

r[i] = 1;

sn = Math.sin(a);

cs = Math.cos(a);

cx[i] = Math.random() * doc_width + 1;

cy[i] = Math.random() * doc_height + 1;

x[i] = r[i] * sn + cx[i];

y[i] = cy[i];

}

function makeRain() {

r[i] = 1;

cx[i] = Math.random() * doc_width + 1;

cy[i] = 1;

x[i] = r[i] * sn + cx[i];

y[i] = r[i] * cs + cy[i];

}

function updateRain() {

r[i] += s;

x[i] = r[i] * sn + cx[i];

y[i] = r[i] * cs + cy[i];

}

function raindropNS() {

for (i = 0; i < no; ++ i) {

updateRain();

if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {

makeRain();

doc_width = self.innerWidth;

doc_height = self.innerHeight;

}

document.layers["dot"+i].top = y[i];

document.layers["dot"+i].left = x[i];

}

setTimeout("raindropNS()", speed);

}

function raindropIE() {

for (i = 0; i < no; ++ i) {

updateRain();

if ((x[i] <= 1) || (x[i] >= (doc_width - 20)) || (y[i] >= (doc_height - 20))) {

makeRain();

doc_width = document.body.clientWidth;

doc_height = document.body.clientHeight;

}

document.all["dot"+i].style.pixelTop = y[i];

document.all["dot"+i].style.pixelLeft = x[i];

}

setTimeout("raindropIE()", speed);

}

if (ns4up) {

raindropNS();

}

else

if (ie4up) {

raindropIE();

}

// End -->

</script>

Scrolling Tool Tip

3 parts to this script

=======================================================

part 1

========================================================

Scrolling Image Map/Text Link Tooltip Script-

Web Tech Online (http://www.fortunecity.com/skyscraper/online/1501)

For full source code, installation instructions,

100's more DHTML scripts, and Terms Of

Use, visit http://www.fortunecity.com/skyscraper/online/1501

if (!document.layers&&!document.all)

event="test"

function showtip2(current,e,text){

if (document.all&&document.readyState=="complete"){

document.all.tooltip2.innerHTML='<marquee style="border:1px solid black">'+text+'</marquee>'

document.all.tooltip2.style.pixelLeft=event.clientX+document.body.scrollLeft+10

document.all.tooltip2.style.pixelTop=event.clientY+document.body.scrollTop+10

document.all.tooltip2.style.visibility="visible"

}

else if (document.layers){

document.tooltip2.document.nstip.document.write('<b>'+text+'</b>')

document.tooltip2.document.nstip.document.close()

document.tooltip2.document.nstip.left=0

currentscroll=setInterval("scrolltip()",100)

document.tooltip2.left=e.pageX+10

document.tooltip2.top=e.pageY+10

document.tooltip2.visibility="show"

}

function hidetip2(){

if (document.all)

document.all.tooltip2.style.visibility="hidden"

else if (document.layers){

clearInterval(currentscroll)

document.tooltip2.visibility="hidden"

}

function scrolltip(){

if (document.tooltip2.document.nstip.left>=-document.tooltip2.document.nstip.document.width)

document.tooltip2.document.nstip.left-=5

else

document.tooltip2.document.nstip.left=150

}

</script>

=================================================

part 2

=============================================================

<div id="tooltip2" style="position:absolute;visibility:hidden;clip:rect(0 150 50 0);width:150px;background-color:lightyellow">

</div>

==============================================================

part 3 - add this inside your <A href> tag.

======================================================

onMouseover="showtip2(this,event,'YOUR WORDS GO HERE')" onMouseout="hidetip2()"

========================================================

EXAMPLE BELOW

==========================================================

<a href="http://www.fortunecity.com/skyscraper/online/1501" onMouseover="showtip2(this,event,'Web Tech Online - Dhtml, javascripts and more')" onMouseout="hidetip2()">Web Tech Online</a>

Site Navigation

D Left Menu

3 parts to this script

======================================================

part 1

=======================================================

<style>

TD{font-family:arial,helvetica; font-size:10pt}

BODY{background-color:white}

A{color:Navy; text-decoration:none}

A:hover{color:red}

A:visited:{color:#808080}

DIV{font-family:arial,helvetica; font-size:12pt; font-weight:bold}

</style>

=======================================================

part 2

=======================================================

This script is made by and copyrighted to Web Tech Online at http://www.fortunecity.com/skyscraper/online/1501

Visit for more great scripts.

This may be used freely as long as this msg is intact!

********************************************************************************

Browsercheck:*/

ie=document.all?1:0

n=document.layers?1:0

//These are the variables you have to set:

//How much of the layer do you wan't to be visible when it's in the out state?

lshow=60

//How many pixels should it move every step?

var move=10;

//At what speed (in milliseconds, lower value is more speed)

menuSpeed=40

//Do you want it to move with the page if the user scroll the page?

var moveOnScroll=true

/********************************************************************************

You should't have to change anything below this.

********************************************************************************/

//Defining variables

var tim;

var ltop;

//Object constructor

function makeMenu(obj,nest){

nest=(!nest) ? '':'document.'+nest+'.'

this.css=(n) ? eval(nest+'document.'+obj):eval(obj+'.style')

this.state=1

this.go=0

this.width=n?this.css.document.width:eval(obj+'.offsetWidth')

this.left=b_getleft

this.obj = obj + "Object"; eval(this.obj + "=this")

}

//Get's the top position.

function b_getleft(){

var gleft=(n) ? eval(this.css.left):eval(this.css.pixelLeft);

return gleft;

}

Deciding what way to move the menu (this is called onmouseover, onmouseout or onclick)

function moveMenu(){

if(!oMenu.state){

clearTimeout(tim)

mIn()

}else{

clearTimeout(tim)

mOut()

}

//Menu in

function mIn(){

if(oMenu.left()>-oMenu.width+lshow){

oMenu.go=1

oMenu.css.left=oMenu.left()-move

tim=setTimeout("mIn()",menuSpeed)

}else{

oMenu.go=0

oMenu.state=1

}

//Menu out

function mOut(){

if(oMenu.left()<0){

oMenu.go=1

oMenu.css.left=oMenu.left()+move

tim=setTimeout("mOut()",menuSpeed)

}else{

oMenu.go=0

oMenu.state=0

}

Checking if the page is scrolled, if it is move the menu after

function checkScrolled(){

if(!oMenu.go) oMenu.css.top=eval(scrolled)+ltop

if(n) setTimeout('checkScrolled()',30)

}

Inits the page, makes the menu object, moves it to the right place,

show it

function menuInit(){

oMenu=new makeMenu('divMenu')

scrolled=n?"window.pageYOffset":"document.body.scrollTop"

oMenu.css.left=-oMenu.width+lshow

ltop=(n)?oMenu.css.top:oMenu.css.pixelTop;

oMenu.css.visibility='visible'

if(moveOnScroll) ie?window.onscroll=checkScrolled:checkScrolled();

}

//Initing menu on pageload

onload=menuInit;

</script>

======================================================

part 3 - this part for your links and page position

======================================================

<div id="divMenu" style="position:absolute; top:300; left:30; height:100; width:540; visibility:hidden">

<a href="javascript://" ONMOUSEOVER="window.status='Site Navigation Scripts';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">Site Navigation</a> -

<a href="javascript://" ONMOUSEOVER="window.status='Page Effect Scripts';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">Page Effects</a> -

<a href="javascript://" ONMOUSEOVER="window.status='MouseOver Scripts';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">Mouse Overs</a> -

<a href="javascript://" ONMOUSEOVER="window.status='User Information Scripts';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">User Information</a> -

</div>

Dynamic Click Menu

5 parts to this script

======================================================

part 1

======================================================

<SCRIPT LANGUAGE="JavaScript">

<!--

//Script by - Web Tech Online

//email - [email protected]

//check out other free stuff at http://www.fortunecity.com/skyscraper/online/1501

//you are free to use this script - modify as required

//just please leave the credits as is

//afterall, it's under my Copyright!!

//Modified extensively by Web Tech Online- http://www.fortunecity.com/skyscraper/online/1501

ns4 = (document.layers)? true:false

ie4 = (document.all)? true:false

function init() {

if(ns4||ie4){

if (ns4) {

block1 = document.ownmenu

}

if (ie4) {

block1 = ownmenu.style

}

block1.x = parseInt(block1.left)

}

function slide() {

if(ns4||ie4){

if (block1.x < 5) {

block1.x += 5

block1.left = block1.x

setTimeout("slide()",20)

}

function back(){

if(ns4||ie4){

block1.x = -100

block1.left = block1.x

}

//-->

</SCRIPT>

=================================================

part 2 - configue your "click for menu" text here

=================================================

<style>

<!--

#buttons{position:absolute;top:100;left:15;

}

-->

</style>

==================================================

part 3 - load the handler

===================================================

====================================================

part 4

=====================================================

<!--

if(ns4||ie4)

document.writeln('<DIV ID="buttons"><a href="javascript:slide()" onclick="window.focus()"><font face="Helvetica" size=-1>Click For Menu</font></a></DIV>')

//-->

</script>

=====================================================

part 5 - your scroll out menu (your links)

======================================================

<div id="ownmenu" style="position:absolute;top:120;left:-100;width:60;Z-index:100;">

<a href="http://www.123webmaster.com/" ONMOUSEOVER="window.status='123Webmaster.com';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">123Webmaster</a><br>

<a href="http://www.1-click-clipart.com/" ONMOUSEOVER="window.status='1-Click-Clipart';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">1-Click-Clipart</a><br>

<a href="http://www.free-clip-images.com/" ONMOUSEOVER="window.status='free-clip-images.com';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">free-clip-images</a><br>

<a href="http://www.freewarefiles.com/" ONMOUSEOVER="window.status='freewarefiles.com';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">FreeWareFiles</a><br>

<a href="http://www.httpcity.com/" ONMOUSEOVER="window.status='HttpCity';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">HttpCity</a><br>

<a href="http://www.perlsite.com/" ONMOUSEOVER="window.status='PerlSite';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">PerlSite</a><br><br><a href="javascript:back()" ONMOUSEOVER="window.status='Close Menu';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">Close Menu</a><br>

</font></center>

</td></tr></table>

</div>

Dynamic Drop Menu

<style>

A{color:White; text-decoration:none}

A:hover{color:#c0c000}

A:link{text-decoration:none;}

TD{font-family:arial,helvetica; font-size:12pt}

DIV.clTopMenu{position:absolute; width:101; height:150; clip:rect(0,101,14,0); visibility:hidden; z-index:31; }

DIV.clTopMenuBottom{position:absolute; width:101; height:3; clip:rect(0,101,3,0); top:11; layer-background-color:#ffffff; background-color:#ffffff; z-index:2}

DIV.clTopMenuText{position:absolute; width:91; left:5; top:15; font-family:arial,helvetica; font-size:12px; z-index:1}

</style>

================================================================

part 2

==============================================================

/**

Visit http://www.fortunecity.com/skyscraper/online/1501/ for more great scripts.

This may be used freely as long as this message is intact!

***

Browsercheck:*/

ie=document.all?1:0

n=document.layers?1:0

/***

If you want to change the appearance on the text, background-colors, size or

anything do that in the style tag above.

This menu might not be as easy to adapt to your own site, but please

play around with it before you mail me for help

***/

/***

Variables to set.

***/

//How many menus do you have? (remember to copy and add divs in the body if you add menus)

var numberOfMenus=0

//The width on the menus (set the width in the stylesheet as well)

var mwidth=101

//Pixels between the menus

var pxBetween=10

//The first menus left position

var fromLeft=20

//The top position of the menus

var fromTop=10

//The bgColor of the bottom mouseover div

var bgColor='#ffffff'

//The bgColor to change to

var bgColorChangeTo='#c0c000'

//The position the mouseover line div will stop at when going up!

var imageHeight=11

/***

You shouldn't have to change anything below this

***/

//Object constructor

function makeNewsMenu(obj,nest){

nest=(!nest) ? '':'document.'+nest+'.'

this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')

this.scrollHeight=n?this.css.document.height:eval('document.all.'+obj+'.offsetHeight')

this.moveIt=b_moveIt;this.bgChange=b_bgChange;

this.slideUp=b_slideUp; this.slideDown=b_slideDown;

this.clipTo=b_clipTo;

this.obj = obj + "Object"; eval(this.obj + "=this")

}

//Objects methods

function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}

function b_bgChange(color){if(ie) this.css.backgroundColor=color; else this.css.bgColor=color}

function b_clipTo(t,r,b,l){

if(n){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l

}else this.css.clip="rect("+t+","+r+","+b+","+l+")";

}

function b_slideUp(ystop,moveby,speed,fn,wh){

if(!this.slideactive){

if(this.y>ystop){

this.moveIt(this.x,this.y-5); eval(wh)

setTimeout(this.obj+".slideUp("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)

}else{

this.slideactive=false; this.moveIt(0,ystop); eval(fn)

}

function b_slideDown(ystop,moveby,speed,fn,wh){

if(!this.slideactive){

if(this.y<ystop){

this.moveIt(this.x,this.y+5); eval(wh)

setTimeout(this.obj+".slideDown("+ystop+","+moveby+","+speed+",'"+fn+"','"+wh+"')",speed)

}else{

this.slideactive=false; this.moveIt(0,ystop); eval(fn)

}

//Initiating the page, making cross-browser objects

function newsMenuInit(){

oTopMenu=new Array()

for(i=0;i<=numberOfMenus;i++){

oTopMenu[i]=new Array()

oTopMenu[i][0]=new makeNewsMenu('divTopMenu'+i)

oTopMenu[i][1]=new makeNewsMenu('divTopMenuBottom'+i,'divTopMenu'+i)

oTopMenu[i][2]=new makeNewsMenu('divTopMenuText'+i,'divTopMenu'+i)

oTopMenu[i][1].moveIt(0,imageHeight)

oTopMenu[i][0].clipTo(0,mwidth,imageHeight+3,0)

oTopMenu[i][0].moveIt(i*mwidth+fromLeft+(i*pxBetween),fromTop)

oTopMenu[i][0].css.visibility="visible"

}

//Moves the menu

function topMenu(num){

if(oTopMenu[num][1].y==imageHeight) oTopMenu[num][1].slideDown(oTopMenu[num][2].scrollHeight+20,10,40,'oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)')

else if(oTopMenu[num][1].y==oTopMenu[num][2].scrollHeight+20) oTopMenu[num][1].slideUp(imageHeight,10,40,'oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)','oTopMenu['+num+'][0].clipTo(0,mwidth,oTopMenu['+num+'][1].y+3,0)')

}

//Changes background onmouseover

function menuOver(num){oTopMenu[num][1].bgChange(bgColorChangeTo)}

function menuOut(num){oTopMenu[num][1].bgChange(bgColor)}

//Calls the init function onload

onload=newsMenuInit;

</script>

===============================================

part 3

================================================

<div id="divTopMenu0" class="clTopMenu"><a href="#" onmouseover="menuOver(0)" onmouseout="menuOut(0)" onclick="topMenu(0); if(ie)this.blur(); return false"><img src="clickformenu.gif" width=101 height=11 alt="" border=0 align="top"></a>

<a href="http://YOUR URL/" ONMOUSEOVER="window.status='ENTER YOUR TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a><br>

<a href="http://YOUR URL/" target="five" ONMOUSEOVER="window.status='ENTER YOUR TEXT HERE';return true;" ONMOUSEOUT="window.status='';return true;" onclick="window.focus()">[ENTER YOUR TEXT HERE]</a></center>

</div>

</div>

Folder Menu

3 Parts to this script

===================================================

part 1 - In this section you can change the position of where it is displayed on the page.

===================================================

<style>

<!--

DIV.clTop{position:absolute; width:170}

DIV.clSub{position:absolute; left:10; width:170}

#divCont{position:relative; left:100; top:0; height:400; width:170;}

A.clMain{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; font-weight:bold; color:black}

A.clSubb{font-family:Arial, Verdana, Helvetica, Helv; font-size:14px; text-decoration:none; color:black}

#divMain{position:absolute}

//-->

</style>

======================================================

PART 2

======================================================

This script is made by and copyrighted to Web Tech Online at http://www.fortunecity.com/skyscraper/online/1501

Visit for more great scripts.

This may be used freely as long as this message is intact!

This script is a "foldout" menu script, all the "foldouts" will

stay outfolded in older browsers. Works in ie4+ and ns4+.

ADDED: Images

To change where the menu appears change the left and top values of the divCont

in the stylesheets, it's currently placed relative so you can

place this menu in tables or similar if you want. Change the

text colors and size in the A.clMain and A.clSubb classes.

Change this to false if you want all the submenus to get unfold when you

foldout a new one.

var stayFolded=false

//This is the image that it changes to when it expands.

var exImg=new Image(); exImg.src='arrow1.gif'

//This is the image is changes to with it's "unfolded" or something :}

//Remeber to change the actual images in the page aswell, but remember to

//keep the name of the image.

var unImg=new Image(); unImg.src='arrow.gif'

Browsercheck

var n = (document.layers) ? 1:0;

var ie = (document.all) ? 1:0;

var browser=((n || ie) && parseInt(navigator.appVersion)>=4)

Making cross-browser objects

function makeMenu(obj,nest){

nest=(!nest) ? '':'document.'+nest+'.'

this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')

this.ref=(n) ? eval(nest+'document.'+obj+'.document'):eval('document');

this.height=n?this.ref.height:eval(obj+'.offsetHeight')

this.x=(n)? this.css.left:this.css.pixelLeft;this.y=(n)? this.css.top:this.css.pixelTop;

this.hideIt=b_hideIt; this.showIt=b_showIt; this.vis=b_vis; this.moveIt=b_moveIt

return this

}

function b_showIt(){this.css.visibility="visible"}

function b_hideIt(){this.css.visibility="hidden"}

function b_vis(){if(this.css.visibility=="hidden" || this.css.visibility=="hide") return true;}

function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}

Initiating the page. Just add to the arrays here to get more menuitems

and add divs in the page

function init(){

oTop=new Array()

oTop[0]=new makeMenu('divTop1','divCont')

oTop[1]=new makeMenu('divTop2','divCont')

oTop[2]=new makeMenu('divTop3','divCont')

oTop[3]=new makeMenu('divTop4','divCont')

oTop[4]=new makeMenu('divTop5','divCont')

oTop[5]=new makeMenu('divTop6','divCont')

oSub=new Array()

oSub[0]=new makeMenu('divSub1','divCont.document.divTop1')

oSub[1]=new makeMenu('divSub2','divCont.document.divTop2')

oSub[2]=new makeMenu('divSub3','divCont.document.divTop3')

oSub[3]=new makeMenu('divSub4','divCont.document.divTop4')

oSub[4]=new makeMenu('divSub5','divCont.document.divTop5')

oSub[5]=new makeMenu('divSub6','divCont.document.divTop6')

for(i=0;i<oSub.length;i++){ oSub[i].hideIt() }

for(i=1;i<oTop.length;i++){ oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height) }

}

This is the function that changes the sub menus to folded or unfolded state.

function menu(num){

if(browser){

if(!stayFolded){

for(i=0;i<oSub.length;i++){

if(i!=num){

oSub[i].hideIt()

oTop[i].ref["imgA"+i].src=unImg.src

}

for(i=1;i<oTop.length;i++){

oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)

}

if(oSub[num].vis()){

oSub[num].showIt()

oTop[num].ref["imgA"+num].src=exImg.src

}else{

oSub[num].hideIt()

oTop[num].ref["imgA"+num].src=unImg.src

}

for(i=1;i<oTop.length;i++){

if(!oSub[i-1].vis()) oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height+oSub[i-1].height)

else oTop[i].moveIt(0,oTop[i-1].y+oTop[i-1].height)

}

//Initiating the menus onload, if it's a 4.x+ browser.

if(browser) onload=init;

</script>

===================================================

Part 3

====================================================

<div id="divCont">

<div id="divTop1" class="clTop"><a href="#" onclick="menu(0); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ONMOUSEOVER="window.status='Web Tech Online Menu';return true;" ONMOUSEOUT="window.status='';return true;"><img src="arrow.gif" name="imgA0" width=12 height=12 alt="" border="0"> [Web Tech Online]</a><br>

 <a href="http://www.fortunecity.com/skyscraper/online/1501/essential_scripts/" class="clSubb" ONMOUSEOVER="window.status='Essential Scripts';return true;" ONMOUSEOUT="window.status='';return true;">-Essential Scripts</a><br>

 <a href="http://www.fortunecity.com/skyscraper/online/1501/mouseover_scripts/" class="clSubb" ONMOUSEOVER="window.status='Mouse Over Scripts';return true;" ONMOUSEOUT="window.status='';return true;">-Mouseover Scripts</a><br>

 <a href="http://www.fortunecity.com/skyscraper/online/1501/page_effects/" class="clSubb" ONMOUSEOVER="window.status='Page Effect Scripts';return true;" ONMOUSEOUT="window.status='';return true;">-Page Effects</a><br>

 <a href="http://www.fortunecity.com/skyscraper/online/1501/site_navigation/" class="clSubb" ONMOUSEOVER="window.status='Site Navigation Scripts';return true;" ONMOUSEOUT="window.status='';return true;">-Site navigation</a><br>

</div><br>

</div>

<div id="divTop2" class="clTop"><a href="#" onclick="menu(1); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;"><img src="arrow.gif" name="imgA1" width=12 height=12 alt="" border="0"> [choice 1]</a><br>

</div><br>

</div>

<div id="divTop3" class="clTop"><a href="#" onclick="menu(2); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;"><img src="arrow.gif" name="imgA2" width=12 height=12 alt="" border="0"> [choice 2]</a><br>

</div><br>

</div>

<div id="divTop4" class="clTop"><a href="" onclick="menu(3); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;"><img src="arrow.gif" name="imgA3" width=12 height=12 alt="" border="0"> [choice 3]</a><br>

</div><br>

</div>

<div id="divTop5" class="clTop"><a href="" onclick="menu(4); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;"><img src="arrow.gif" name="imgA4" width=12 height=12 alt="" border="0"> [choice 4]</a><br>

</div><br>

</div>

<div id="divTop6" class="clTop"><a href="" onclick="menu(5); return false" class="clMain" OnMousedown="window.focus()" OnMouseup="window.focus()" ONMOUSEOVER="window.status='Whateversay';return true;" ONMOUSEOUT="window.status='';return true;"><img src="arrow.gif" name="imgA5" width=12 height=12 alt="" border="0"> [choice 5]</a><br>

</div><br>

</div>

Menu Description

4 parts to this script

==================================================

part 1

===================================================

<style>

DIV{font-family:arial,helvetica; font-size:10pt}

</style>

======================================================================

part 2 - enter your variables here and text statement

======================================================================

Created by Web Tech Online - http://www.fortunecity.com/skyscraper/online/1501

This may be used freely as long as this message is intact!

//You have to set some variables here:

//Set the font for the msg

msgFont='Arial,helvetiva'

//Set the fontSize in px

msgFontSize="12"

//Set the fontColor

msgFontColor="black"

Here's the array that holds the text to change the divmessage to

when you mouseover. Change the text here

messages=new Array(6)

messages[0]="<b>A1 JavaScripts</b><br>A heap of <i><u><font color=ff0000>free</font></u></i> javascripts to enhance your site!"

messages[1]="<b>123Webmaster</b><br>The largest directory of <i><u><font color=ff0000>free</font></u></i> webmaster resources on the planet!"

messages[2]="<b>HttpCITY</b><br>25 megs of <i><u><font color=ff0000>free</font></u></i> webspace;<br> httpcity.com/you!"

messages[3]="<b>Free Clip Images</b><br>A monstrous collection of <i><u><font color=ff0000>free</font></u></i> graphics!"

messages[4]="<b>1-Click-Clipart</b><br>The HOTTEST <i><u><font color=ff0000>free</font></u></i> clipart and resource sites ranked by popularity!"

messages[5]="<b>FreeWare Files</b><br>Download tons of <i><u><font color=ff0000>free</font></u></i> Software!"

messages[6]="<b>Perl Site</b><br>Download <i><u><font color=ff0000>free</font></u></i> perl scripts!"

messages[7]=""

//nothing needs to be changed below here

ie=document.all?1:0

n=document.layers?1:0

//Constructing the ChangeText object

function makeChangeTextObj(obj){

this.writeref=(n) ? eval('document.'+obj+'.document'):eval(obj);

this.writeIt=b_writeIt;

}

function b_writeIt(text){

if(n){

this.writeref.write(text)

this.writeref.close()

}

if(ie)this.writeref.innerHTML=text

}

function changeText(num){

if(ie || n) oMessage.writeIt('<span style="font-size:' +msgFontSize+'px; font-family:'+msgFont+'; color:'+msgFontColor+'">'+messages[num]+'</span>')

}

function changeTextInit(){

if(ie || n) oMessage=new makeChangeTextObj('divMessage')

}

//Calls the init function on pageload

onload=changeTextInit

</script>

=====================================================

part 3 - enter your mouse over descriptions and links here

=====================================================

<a href="http://www.fortunecity.com/skyscraper/online/1501" onmouseover="changeText(0); window.status='Web Tech Online';return true;" onMouseout="changeText(7,0); window.status='';return true;" onclick="window.focus()">Web Tech Online</a><br>

<a href="http://www.123webmaster.com" onmouseover="changeText(1); window.status='123Webmaster';return true;" onMouseout="changeText(7,0); window.status='';return true;" onclick="window.focus()">123Webmaster</a><br>

<a href="http://www.free-clip-images.com" onmouseover="changeText(3); window.status='Free Clip Images';return true;" onMouseout="changeText(7,0); window.status='';return true;" onclick="window.focus()">Free Clip Images</a><br>

<a href="http://www.1-click-clipart.com" onmouseover="changeText(4); window.status='1-Click-Clipart';return true;" onMouseout="changeText(7,0)"; window.status='';return true;" onclick="window.focus()">1-Click-Clipart</a><br>

<a href="http://www.freewarefiles.com" onmouseover="changeText(5); window.status='FreeWare Files';return true;" onMouseout="changeText(7,0); window.status='';return true;" onclick="window.focus()">FreeWare Files</a><br>

</div>

====================================================================

part 4 - enter your table size, positioning and default statement

===================================================================

<table Border=0 cellpadding=0 cellspacing=0 width="400" hight="200">

This is the default text that will show in<br> 3.x browsers. You have to place this with tables or <br>something instead of layers for backwards compatibility.</td></table>

</div>

Menu Scroller

3 Parts to this script

=============================================================

Part 1 - adjust speed (lower number is faster), set distance from top, add item number in the section

=============================================================

<!-- Begin

function buildMenu() {

speed=5;

topdistance=20;

items=7;

y=-50;

ob=1;

if (navigator.appName == "Netscape") {

v=".top=",dS="document.",sD="";

}

else {

v=".pixelTop=",dS="",sD=".style";

}

function scrollItems() {

if (ob<items+1) {

objectX="object"+ob; y+=10; eval(dS + objectX + sD + v + y);

if (y<topdistance) setTimeout("scrollItems()",speed);

else y=-50, topdistance+=40, ob+=1, setTimeout("scrollItems()",speed);

}

// End -->

</SCRIPT>

======================================================

Part 2

====================================================

=======================================================

Part 3 - this is where you add the menus

=======================================================

</center></td></table>

</div>

</center></td>

</table>

</div>

</center></td>

</table>

</div>

</center></td>

</table>

</div>

</center></td>

</table>

</div>

</center></td>

</table>

</div>

</center></td>

</table>

</div>

Slide Scroll Menu

3 parts to this script

========================================

part 1

=======================================

<style>

body{background-color:#FFFFFF}

A{color:Navy; text-decoration:none}

A:hover{color:red}

A:visited:{color:#808080}

TD{font-family:arial,helvetica; font-size:10pt}

#divBg{position:absolute; z-index:10; width:200; left:0; height:100; clip:rect(0,10,10,0)}

#divMenu{position:absolute; left:15; top:6; font-weight:bold}

#divArrowLeft{position:absolute; width:20; height:20; left:0; top:9}

#divArrowRight{position:absolute; width:20; height:20; top:9}

</style>

==============================================

part 2

===============================================

/********************************************************************************

This script is made by and copyrighted to Web Tech Online at http://www.fortunecity.com/skyscraper/online/1501

Visit for more great scripts.

This may be used freely as long as this message is intact!

********************************************************************************/

//Simple browsercheck

var n = (document.layers) ? 1:0;

var ie = (document.all) ? 1:0;

/**************************************************************************

Variables to set.

***************************************************************************/

//The height of the menu

menuHeight=30

//Width of the arrows

arrowWidth=16

//Scroll speed: (in milliseconds, change this one and the next variable to change the speed)

scrollSpeed=20

//Pixels to scroll per timeout.

scrollPx=10

/**************************************************************************

Scrolling functions

***************************************************************************/

var tim;

var noScroll=true

function mLeft(){

if(!noScroll && oMenu.x<arrowWidth){

oMenu.moveBy(scrollPx,0)

tim=setTimeout("mLeft()",scrollSpeed)

}

function mRight(){

if(!noScroll && oMenu.x>-(oMenu.scrollWidth-(pageWidth))-arrowWidth){

oMenu.moveBy(-scrollPx,0)

tim=setTimeout("mRight()",scrollSpeed)

}

function noMove(){clearTimeout(tim); noScroll=true}

/**************************************************************************

Object part

***************************************************************************/

function makeObj(obj,nest,num){

nest=(!nest) ? '':'document.'+nest+'.'

this.css=(n) ? eval(nest+'document.'+obj):eval('document.all.'+obj+'.style')

this.evnt=(n)? eval(nest+'document.'+obj):eval(obj);

this.scrollWidth=n?this.css.document.width:this.evnt.offsetWidth

this.x=(n)? this.css.left:this.evnt.offsetLeft; this.y=(n)? this.css.top:this.evnt.offsetTop;

this.moveBy=b_moveBy; this.moveIt=b_moveIt; this.showIt=b_showIt;this.clipTo=b_clipTo;

return this

}

function b_moveBy(x,y){this.x=this.x+x; this.y=this.y+y; this.css.left=this.x; this.css.top=this.y}

function b_moveIt(x,y){this.x=x; this.y=y; this.css.left=this.x; this.css.top=this.y}

function b_clipTo(t,r,b,l){

if(n){this.css.clip.top=t; this.css.clip.right=r; this.css.clip.bottom=b; this.css.clip.left=l

}else this.css.clip="rect("+t+","+r+","+b+","+l+")";

}

function b_showIt(){this.css.visibility="visible"}

/**************************************************************************

Object part end

***************************************************************************/

/**************************************************************************

Init function. Set the placements of the objects here.

***************************************************************************/

function side_init(){

//Width of the menu, Currently set to the width of the document.

//If you want the menu to be 500px wide for instance, just

//set the the pageWidth=500 in stead.

pageWidth=(n)?innerWidth:document.body.offsetWidth-20;

oBg=new makeObj('divBg')

oMenu=new makeObj('divMenu','divBg')

oArrowRight=new makeObj('divArrowRight','divBg')

//Placement

oBg.moveIt(0,0) //Main div, holds all the other divs.

oMenu.moveIt(arrowWidth,6)

oArrowRight.moveIt(pageWidth-arrowWidth,9)

//setting the width and the visible area of the links.

if(ie){ oBg.css.width=pageWidth; oBg.css.overflow="hidden"}

oBg.clipTo(0,pageWidth,menuHeight,0)

}

//executing the init function on pageload.

onload=side_init;

</script>

==================================================

part 3

===================================================

<div id="divBg">

[<a href="#">link 1</a>]

[<a href="#">link 2</a>]

[<a href="#">link 3</a>]

[<a href="#">link 4</a>]

[<a href="#">link 5</a>]

[<a href="#">link 6</a>]

[<a href="#">link 7</a>]

[<a href="#">link 8</a>]

[<a href="#">link 9</a>]

[<a href="#">link 10</a>]

[<a href="#">link 11</a>]

[<a href="#">link 12</a>]

[<a href="#">link 13</a>]

[<a href="#">link 14</a>]

[<a href="#">link 15</a>]

[<a href="#">link 16</a>]

[<a href="#">link 17</a>]

[<a href="#">link 18</a>]

[<a href="#">link 19</a>]

[<a href="#">link 20</a>]

[<a href="#">link 21</a>]

[<a href="#">link 22</a>]

[<a href="#">link 23</a>]

[<a href="#">link 24</a>]

[<a href="#">link 25</a>]

[<a href="#">link 26</a>]

[<a href="#">link 27</a>]

[<a href="#">link 28</a>]

[<a href="#">link 29</a>]

[<a href="#">link 30</a>]

</td></tr></table>

</div>

</div>

Slide-In Menu

2 parts to this script

===============================================

part 1 change the appearence in this part

================================================

<style>

<!--

A:hover{color:#ffff00}

A:visited:{color:#ffffff}

#slidemenubar, #slidemenubar2{

position:absolute;

left:-155px;

width:160px;

top:170px;

border:1.5px solid black;

background-color:lightblue;

layer-background-color:lightblue;

font:bold 12px Helvetica;

line-height:14px;

}

-->

</style>

==========================================

part 2

===========================================

//slide in menu adapted and modified from original found on

//Web Tech Online(http://www.fortunecity.com/skyscraper/online/1501)

//100's more DHTML scripts, and Terms Of

//Use, visit http://www.fortunecity.com/skyscraper/online/1501

if (document.all)

document.write('<div id="slidemenubar2" style="left:-150" onMouseover="pull()" onMouseout="draw()">')

</script>

var sitems=new Array()

var sitemlinks=new Array()

var sitemstatus=new Array()

var sitemsnone=new Array()

//enter your site names here

//follow the below pattern to add as many as you wish

sitems[0]="A1 JavaScripts"

sitems[1]="123Webmaster.com"

sitems[2]="1-Click-Clipart"

sitems[3]="Free-Clip-Art-Images"

sitems[4]="FreeWareFiles"

sitems[5]="HttpCITY"

sitems[6]="PerlSite"

//This is where you enter your links in the same order as above.

sitemlinks[0]="http://www.a1javascripts.com"

sitemlinks[1]="http://www.123webmaster.com"

sitemlinks[2]="http://www.1-click-clipart.com"

sitemlinks[3]="http://www.free-clip-images.com"

sitemlinks[4]="http://www.freewarefiles.com"

sitemlinks[5]="http://www.httpcity.com"

sitemlinks[6]="http://www.perlsite.com"

//This is where you enter the mouse over status text

sitemstatus[0]="window.status='A1 JavaScripts'"

sitemstatus[1]="window.status='123 Webmaster'"

sitemstatus[2]="window.status='1-click-clipart'"

sitemstatus[3]="window.status='Free-Clip-Images'"

sitemstatus[4]="window.status='FreeWare Files'"

sitemstatus[5]="window.status='Http City'"

sitemstatus[6]="window.status='Perl Site'"

//do not edit below here

sitemsnone[0]="window.status=''"

for (i=0;i<=sitems.length-1;i++)

document.write('<a href='+sitemlinks[i]+' ONMOUSEOVER="'+sitemstatus[i]+';return true;" ONMOUSEOUT="'+sitemsnone[0]+';return true;">'+sitems[i]+'</a><br>')

</script>

</layer>

function regenerate(){

window.location.reload()

}

function regenerate2(){

if (document.layers)

setTimeout("window.onresize=regenerate",400)

}

window.onload=regenerate2

if (document.all){

document.write('</div>')

themenu=document.all.slidemenubar2.style

rightboundary=0

leftboundary=-150

}

else{

themenu=document.layers.slidemenubar

rightboundary=150

leftboundary=10

}

function pull(){

if (window.drawit)

clearInterval(drawit)

pullit=setInterval("pullengine()",50)

}

function draw(){

clearInterval(pullit)

drawit=setInterval("drawengine()",50)

}

function pullengine(){

if (document.all&&themenu.pixelLeft<rightboundary)

themenu.pixelLeft+=5

else if(document.layers&&themenu.left<rightboundary)

themenu.left+=5

else if (window.pullit)

clearInterval(pullit)

}

function drawengine(){

if (document.all&&themenu.pixelLeft>leftboundary)

themenu.pixelLeft-=5

else if(document.layers&&themenu.left>leftboundary)

themenu.left-=5

else if (window.drawit)

clearInterval(drawit)

}

</script>

Questions or comments about this site?

Mail to: [email protected]

Web Tech Online

This site was created by

GlobalNet Enterprises