Brought to you by...

Want to see how much JavaScript it took just to do those three little things. Hereīs what Fusion created, so you didnīt have to:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 3.2 FINAL//EN">

<HTML>
<HEAD><META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=ISO-8859-1">

<TITLE>DHTML</TITLE>
<META NAME="Generator" CONTENT="NetObjects Fusion 3.0.1 for Windows">

<SCRIPT>
var F_A,F_B,F_CH,F_CL,F_DB,F_E,F_F,F_L,F_MT,F_MV,F_R,F_SE,F_SU,F_U,F_HR,F_MU,F _MD;
function F_e(){}
function F_n(){}
function F_onLoaded(){}
</SCRIPT>
<SCRIPT language="JavaScript1.2">
var t = "";
document.write("<SCR"+t+"IPT src=\"file:///C:/F3/NetObjects System/script.js\"><\/SCR"+t+"IPT>");
</SCRIPT>
<SCRIPT language="JavaScript1.2">
var t = "";
document.write("<SCR"+t+"IPT src=\"file:///C:/F3/NetObjects System/effects.js\"><\/SCR"+t+"IPT>");
</SCRIPT>
<SCRIPT>
function F_doLoaded(){
document.main = new F_cMain();
document.objectModel = new Object();
F_OM('Layout','LayoutLYR', 'doc', '', new Array() );
F_OM('Head' , 'HeadLYR', 'txt', 'Layout',new Array(
'Page Loaded','Head','Fly','In From Top',0),'',0);
F_OM('Picture2' , 'Picture2LYR', 'img', 'Layout',new Array(
'Mouse Over','ChipmunkAnimated','Fly','In From Right',0,
'Mouse Out','ChipmunkAnimated','Hide','',0),'',0);
F_OM('ChipmunkAnimated' , 'ChipmunkAnimatedLYR', 'img', 'Layout',null,'',0);
F_OM('ChipmunkC2' , 'ChipmunkC2LYR', 'img', 'Layout',new Array(
'Mouse Down','ChipmunkC2','Start Drag','Until Mouse Up',0,
'Mouse Up','ChipmunkC2','End Drag','',0),'',0);
F_OM('Explan1' , 'Explan1LYR', 'txt', 'Layout',null,'',0);
F_OM('LayoutRegion1' , 'LayoutRegion1LYR', 'lyr', 'Layout',new Array(
'Mouse Over','Explan1','Fly','In From Right',0,
'Mouse Out','Explan1','Fly','Out To Right',0),'',0);
F_OM('NavigationBar1' , 'NavigationBar1LYR', 'nav', 'Layout',null,'',0);
F_OM('NavigationBar7' , 'NavigationBar7LYR', 'nav', 'Layout',null,'',0);
F_pageLoaded('Layout');
}
</SCRIPT>
<SCRIPT language="JScript">
document.writeln("<STYLE ID=\"NOF_STYLE_SHEET\">")
document.writeln("#LayoutLYR {position:absolute; top:0; left:0; z-index: 1; VISIBILITY: INHERIT; }")
document.writeln("#Picture1LYR {position: absolute;  visibility: inherit; top:702; left:423; width:70; height:29; z-index:1}")
document.writeln("#NavigationBar1LYR {position: absolute;  visibility: inherit; top:676; left:51; z-index:2}")
document.writeln("#Text42LYR {position: absolute;  visibility: inherit; top:699; left:51; width:364; height:16; z-index:3}")
document.writeln("#Rectangle38LYR {position: absolute;  visibility: inherit; top:651; left:0; width:660; height:16; z-index:4}")
document.writeln("#Rectangle42LYR {position: absolute;  visibility: inherit; top:743; left:0; width:660; height:16; z-index:5}")
document.writeln("#Text49LYR {position: absolute;  visibility: inherit;  BACKGROUND: #000000; top:0; left:631; width:42; height:51; z-index:6}")
document.writeln("#NavigationBar7LYR {position: absolute;  visibility: inherit; top:0; left:0; width:631; height:51; z-index:7}")
document.writeln("#HeadLYR {position: absolute;  visibility: hidden; top:69; left:40; width:495; height:38; z-index:8}")
document.writeln("#Picture2LYR {position: absolute;  visibility: inherit; top:140; left:48; width:76; height:75; z-index:9}")
document.writeln("#MouseOvertext1LYR {position: absolute;  visibility: inherit; top:148; left:132; width:324; height:48; z-index:10}")
document.writeln("#ChipmunkAnimatedLYR {position: absolute;  visibility: hidden; top:210; left:132; width:300; height:47; z-index:11}")
document.writeln("#ChipmunkC2LYR {position: absolute;  visibility: inherit; top:305; left:49; width:76; height:75; z-index:12}")
document.writeln("#DragTextLYR {position: absolute;  visibility: inherit; top:304; left:133; width:324; height:64; z-index:13}")
document.writeln("#Explan1LYR {position: absolute;  visibility: hidden; top:423; left:246; width:282; height:66; z-index:14}")
document.writeln("#WantmoreinfoLYR {position: absolute;  visibility: inherit; top:423; left:54; width:180; height:66; z-index:15}")
document.writeln("#LayoutRegion1LYR {position: absolute;  visibility: inherit; top:400; left:35; width:202; height:96; z-index:16}")
document.writeln("</STYLE>")
</SCRIPT>


</HEAD>

<BODY  BACKGROUND="file:///C:/F3/Styles/Fuse/Backgrounds/fuse-back.gif" LINK="#0000FF" VLINK="#993399" TEXT="#000000" bgcolor=#99CCCC
  onLoad="F_onLoaded()"  >


<DIV id="LayoutLYR"  ><LAYER id="LayoutLYR"   TOP=0 LEFT=0 VISIBILITY=INHERIT WIDTH=673 HEIGHT=759 Z-INDEX=1>
<DIV id="HeadLYR" ><LAYER id="HeadLYR" VISIBILITY=HIDDEN  TOP=69 LEFT=40 WIDTH=495 HEIGHT=38 Z-INDEX=8  >
<P><B><FONT COLOR="#99CCCC" SIZE="+3" FACE="Verdana,Tahoma,Arial,Helvetica,Sans">Dynamic HTML in action...</FONT></B></LAYER></DIV>
<DIV id="Picture2LYR" ><LAYER id="Picture2LYR" VISIBILITY=INHERIT  TOP=140 LEFT=48 WIDTH=76 HEIGHT=75 Z-INDEX=9  ><A HREF="Javascript:void(0)"  onMouseOver="return(F_e('Picture2', F_MV))" onMouseOut="return(F_e('Picture2', F_MT))"><IMG id="Picture2" HEIGHT=75 WIDTH=76 SRC="file:///C:/F3/User Sites/Fuse/Assets/chipmunk-c.gif"  BORDER=0  ALT="chipmunk-c" ></A></LAYER></DIV>
<DIV id="MouseOvertext1LYR" ><LAYER id="MouseOvertext1LYR" VISIBILITY=INHERIT  TOP=148 LEFT=132 WIDTH=324 HEIGHT=48 Z-INDEX=10  >
<P><FONT SIZE="-1" FACE="Verdana,Tahoma,Arial,Helvetica,Sans">Place your move over the chipmunk at left to see another chipmunk appear. Move the mouse away and it will disappear</FONT></LAYER></DIV>
<DIV id="ChipmunkAnimatedLYR" ><LAYER id="ChipmunkAnimatedLYR" VISIBILITY=HIDDEN  TOP=210 LEFT=132 WIDTH=300 HEIGHT=47 Z-INDEX=11  ><IMG id="ChipmunkAnimated" HEIGHT=47 WIDTH=300 SRC="file:///C:/F3/User Sites/Fuse/Assets/chip-run.gif"  BORDER=0  ALT="chip-run" ></LAYER></DIV>
<DIV id="ChipmunkC2LYR" ><LAYER id="ChipmunkC2LYR" VISIBILITY=INHERIT  TOP=305 LEFT=49 WIDTH=76 HEIGHT=75 Z-INDEX=12  ><A HREF="Javascript:void(0)"  onMouseUp="return(F_e('ChipmunkC2', F_MU))" onMouseDown="return(F_e('ChipmunkC2', F_MD))"><IMG id="ChipmunkC2" HEIGHT=75 WIDTH=76 SRC="file:///C:/F3/User Sites/Fuse/Assets/chipmunk-c.gif"  BORDER=0  ALT="chipmunk-c" ></A></LAYER></DIV>
<DIV id="DragTextLYR" ><LAYER id="DragTextLYR" VISIBILITY=INHERIT  TOP=304 LEFT=133 WIDTH=324 HEIGHT=64 Z-INDEX=13  >
<P><FONT SIZE="-1" FACE="Verdana,Tahoma,Arial,Helvetica,Sans">You can drag the chipmunk at left anywhere you want on the page. Click and hold down the mouse button, then drag the chipmunk around the page.</FONT></LAYER></DIV>
<DIV id="Explan1LYR" ><LAYER id="Explan1LYR" VISIBILITY=HIDDEN  TOP=423 LEFT=246 WIDTH=282 HEIGHT=66 Z-INDEX=14  >
<P><B><FONT SIZE="+1" FACE="Verdana,Tahoma,Arial,Helvetica,Sans">Voila! This text appears when you mouse over the other text.</FONT></B></LAYER></DIV>
<DIV id="WantmoreinfoLYR" ><LAYER id="WantmoreinfoLYR" VISIBILITY=INHERIT  TOP=423 LEFT=54 WIDTH=180 HEIGHT=66 Z-INDEX=15  >
<P><B><FONT COLOR="#99CCCC" SIZE="+1" FACE="Verdana,Tahoma,Arial,Helvetica,Sans">Want more info?<BR>Put your mouse over this!</FONT></B></LAYER></DIV>
<DIV id="LayoutRegion1LYR"  onMouseOver="return(F_e('LayoutRegion1', F_MV))" onMouseOut="return(F_e('LayoutRegion1', F_MT))"><LAYER id="LayoutRegion1LYR" VISIBILITY=INHERIT  TOP=400 LEFT=35 WIDTH=202 HEIGHT=96 Z-INDEX=16   onMouseOver="return(F_e('LayoutRegion1', F_MV))" onMouseOut="return(F_e('LayoutRegion1', F_MT))"></LAYER></DIV>
<DIV id="Picture1LYR" ><LAYER id="Picture1LYR" VISIBILITY=INHERIT  TOP=702 LEFT=423 WIDTH=70 HEIGHT=29 Z-INDEX=1  ><A HREF="http://www.netobjects.com"><IMG id="Picture1" HEIGHT=29 WIDTH=70 SRC="file:///C:/F3/User Sites/Fuse/Assets/BuiltByNOF.gif"  BORDER=0  ALT="BuiltByNOF" ></A></LAYER></DIV>
<DIV id="NavigationBar1LYR" ><LAYER id="NavigationBar1LYR" VISIBILITY=INHERIT  TOP=676 LEFT=51 WIDTH=449 HEIGHT=16 Z-INDEX=2  > [<A HREF="file:///C:/F3/NetObjects System/nolinks.gif">Home</A>]  [<A HREF="file:///C:/F3/NetObjects System/nolinks.gif">Start&nbsp;Here</A>]  [<A HREF="file:///C:/F3/NetObjects System/nolinks.gif">Plan</A>]  [<A HREF="file:///C:/F3/NetObjects System/nolinks.gif">Design</A>]  [<A HREF="file:///C:/F3/NetObjects System/nolinks.gif">Build</A>]  [<A HREF="file:///C:/F3/NetObjects System/nolinks.gif">Publish</A>]  [<A HREF="file:///C:/F3/NetObjects System/nolinks.gif">Find</A>]  [<A HREF="file:///C:/F3/NetObjects System/nolinks.gif">New</A>] </LAYER></DIV>
<DIV id="Text42LYR" ><LAYER id="Text42LYR" VISIBILITY=INHERIT  TOP=699 LEFT=51 WIDTH=364 HEIGHT=16 Z-INDEX=3  >
<P><A HREF="file:///C:/F3/NetObjects System/nolinks.gif"><FONT SIZE="-1" FACE="Verdana,Tahoma,Arial,Helvetica,Sans">Contact the Editor</FONT></A><FONT SIZE="-1" FACE="Verdana,Tahoma,Arial,Helvetica,Sans"> - </FONT><A HREF="file:///C:/F3/NetObjects System/nolinks.gif"><FONT SIZE="-1" FACE="Verdana,Tahoma,Arial,Helvetica,Sans">Legal Info</FONT></A><FONT SIZE="-1" FACE="Verdana,Tahoma,Arial,Helvetica,Sans"></FONT></LAYER></DIV>
<DIV id="Rectangle38LYR" ><LAYER id="Rectangle38LYR" VISIBILITY=INHERIT  TOP=651 LEFT=0 WIDTH=660 HEIGHT=16 Z-INDEX=4  ><IMG id="Rectangle38" HEIGHT=16 WIDTH=660 SRC="file:///C:/F3/User Sites/Fuse/Preview/auto_generated_images/a_Rectangle_4.gif" BORDER=0 ></LAYER></DIV>
<DIV id="Rectangle42LYR" ><LAYER id="Rectangle42LYR" VISIBILITY=INHERIT  TOP=743 LEFT=0 WIDTH=660 HEIGHT=16 Z-INDEX=5  ><IMG id="Rectangle42" HEIGHT=16 WIDTH=660 SRC="file:///C:/F3/User Sites/Fuse/Preview/auto_generated_images/a_Rectangle_2.gif" BORDER=0 ></LAYER></DIV>
<DIV id="Text49LYR" ><LAYER id="Text49LYR" VISIBILITY=INHERIT  TOP=0 LEFT=631 WIDTH=42 HEIGHT=51 Z-INDEX=6  BGCOLOR="#000000" >&nbsp;</LAYER></DIV>
<DIV id="NavigationBar7LYR" ><LAYER id="NavigationBar7LYR" VISIBILITY=INHERIT  TOP=0 LEFT=0 WIDTH=631 HEIGHT=51 Z-INDEX=7  >
  <TABLE id="NavigationBar7" BORDER=0 CELLSPACING=0 CELLPADDING=0  WIDTH=631 >
 <TR VALIGN="top" ALIGN="left">
<TD WIDTH=82><A HREF="file:///C:/F3/NetObjects System/nolinks.gif"><IMG id="NavigationButton49" HEIGHT=51 WIDTH=82 SRC="file:///C:/F3/User Sites/Fuse/Assets/p-home.gif"  BORDER=0 ></A></TD>
<TD WIDTH=61><A HREF="file:///C:/F3/NetObjects System/nolinks.gif"><IMG id="NavigationButton50" HEIGHT=51 WIDTH=61 SRC="file:///C:/F3/User Sites/Fuse/Assets/h-start.gif"  BORDER=0 ></A></TD>
<TD WIDTH=66><A HREF="file:///C:/F3/NetObjects System/nolinks.gif"><IMG id="NavigationButton51" HEIGHT=51 WIDTH=66 SRC="file:///C:/F3/User Sites/Fuse/Assets/p-plan.gif"  BORDER=0 ></A></TD>
<TD WIDTH=86><A HREF="file:///C:/F3/NetObjects System/nolinks.gif"><IMG id="NavigationButton52" HEIGHT=51 WIDTH=86 SRC="file:///C:/F3/User Sites/Fuse/Assets/p-design.gif"  BORDER=0 ></A></TD>
<TD WIDTH=82><A HREF="file:///C:/F3/NetObjects System/nolinks.gif"><IMG id="NavigationButton53" HEIGHT=51 WIDTH=82 SRC="file:///C:/F3/User Sites/Fuse/Assets/p-build.gif"  BORDER=0 ></A></TD>
<TD WIDTH=105><A HREF="file:///C:/F3/NetObjects System/nolinks.gif"><IMG id="NavigationButton54" HEIGHT=51 WIDTH=105 SRC="file:///C:/F3/User Sites/Fuse/Assets/p-publish.gif"  BORDER=0 ></A></TD>
<TD WIDTH=69><A HREF="file:///C:/F3/NetObjects System/nolinks.gif"><IMG id="NavigationButton55" HEIGHT=51 WIDTH=69 SRC="file:///C:/F3/User Sites/Fuse/Assets/p-find.gif"  BORDER=0 ></A></TD>
<TD WIDTH=80 HEIGHT=51><A HREF="file:///C:/F3/NetObjects System/nolinks.gif"><IMG id="NavigationButton56" HEIGHT=51 WIDTH=80 SRC="file:///C:/F3/User Sites/Fuse/Assets/p-new.gif"  BORDER=0 ></A></TD>
 </TR>
  </TABLE></LAYER></DIV>
</LAYER></DIV>


</BODY>
</HTML>


Click here to return to the DHTML Example

Click here to return to Dot Comīs As the Page Turns...

 

[Home] [Start Here] [Plan] [Design] [Build] [Grow] [FuseLetter] [New]

SITE MAP - Contact us - Legal Info
www.efuse.com ©2000, NetObjects

Sign up for our free FuseLetter!

BuiltByNOF

bulletTry NetObjects Fusion for free
bulletBuy  NetObjects Fusion4 for $49
bulletBuy FusionMX for $99

Learn about NetObjects Training Classes

fuseman