home *** CD-ROM | disk | FTP | other *** search
/ Dynamic HTML Construction Kit / Dynamic HTML Construction Kit.iso / source_code / dhtmlunl / dhtml.exe / CD Content / Chap12 / dun12_9.txt < prev   
Encoding:
Text File  |  1997-12-18  |  10.9 KB  |  435 lines
  1. <HTML>
  2. <HEAD>
  3. <TITLE>Bringing it all together</TITLE>
  4. </HEAD>
  5.  
  6. <SCRIPT LANGUAGE="JavaScript">
  7. var L=new layerTool();
  8. function layerTool()
  9.     {
  10.     if (navigator.appName=="Netscape")
  11.         this.layerProp=navProp;
  12.     else
  13.         this.layerProp=exProp;
  14.     }
  15. function exProp()
  16.     {
  17.     return document.all[arguments[arguments.length-1]].style;
  18.     }
  19. function navProp()
  20.     {
  21.     retVal="";
  22.     for (var x=0;x<arguments.length;x++)
  23.         {
  24.         retVal+="document.layers[\'"+arguments[x]+"\']";
  25.         if (x!=arguments.length-1)
  26.             retVal+=".";
  27.         }
  28.     return eval(retVal);
  29.     }
  30. function Point(X,Y)
  31.     {
  32.     this.x=X;
  33.     this.y=Y;
  34.     }
  35. function rect(X1,Y1,X2,Y2)
  36.     {
  37.     this.left=X1;
  38.     this.top=Y1;
  39.     this.right=X2;
  40.     this.bottom=Y2;
  41.     }
  42. function foster(child,ancestor)
  43.     {
  44.     for (x in ancestor)
  45.         {
  46.         if (!(child [x.toString()]))
  47.              child [x.toString()]=ancestor[x];
  48.         }
  49.     }
  50. function random (limit)
  51.     {
  52.      return (Math.round(((Math.random())*1000))%limit);
  53.     }
  54.  
  55. function layerObject(layerID,pos,vel,z,bounds,bounce)
  56.     {
  57.     // properties
  58.     this.layerID=layerID;
  59.     this.position=pos;
  60.     this.velocity=vel;
  61.     this.boundsRect=bounds;
  62.     this.depth=z;
  63.     this.bounce=bounce;
  64.     this.visibility="visible";
  65.     this.isGoing=false;
  66.     this.active=true;
  67.     // methods
  68.     this.show=showLayer;
  69.     this.setZorder=setZorder;
  70.     this.hide=hideLayer;
  71.     this.setPosition=setPosition;
  72.     this.draw=drawLayer;
  73.     this.update=updateLayer;
  74.     this.journey=journey;
  75.     this.courseCorrect=courseCorrect;
  76.     this.show();
  77.     }
  78.  
  79. function setZorder(z)
  80.     {
  81.     this.depth=z;
  82.     }
  83. function showLayer()
  84.     {
  85.     L.layerProp(this.layerID).visibility="visible";
  86.     }
  87. function hideLayer()
  88.     {
  89.     L.layerProp(this.layerID).visibility="hidden";
  90.     }
  91. function drawLayer()
  92.     {
  93.     L.layerProp(this.layerID).zIndex=this.depth;
  94.     L.layerProp(this.layerID).left=(this.position).x;
  95.     L.layerProp(this.layerID).top=(this.position).y;
  96.     }
  97. function setPosition(pos)
  98.     {
  99.     this.position=pos;
  100.     }
  101. function journey(target,jumps)
  102.     {
  103.     this.leaps=jumps;//number of jumps
  104.     this.target=target;
  105.     this.isGoing=true;
  106.     this.active=true;
  107.     }
  108. function courseCorrect()
  109.     {
  110.     var xDist=(this.target.x-this.position.x);
  111.     var yDist=(this.target.y-this.position.y);
  112.     if (this.leaps>1)
  113.         {
  114.         this.leaps--;
  115.         this.velocity.x=Math.round( xDist/(this.leaps) ) ;
  116.         this.velocity.y=Math.round( yDist/(this.leaps) );
  117.         }
  118.     else
  119.         {
  120.         this.isGoing=false;
  121.         this.velocity=new Point(0,0);
  122.         }
  123.     }
  124. function updateLayer()
  125.     {
  126.     if (this.isGoing)
  127.         this.courseCorrect();
  128.     if (this.velocity.x==0 && this.velocity.y==0)
  129.         this.active=false;
  130.     else
  131.         this.active=true;
  132.     var newPos=new Point(this.position.x+this.velocity.x,
  133.                            this.position.y+this.velocity.y);
  134.     if (this.bounce && ! this.isGoing)
  135.         {
  136.         if (newPos.x>this.boundsRect.right || newPos.x<this.boundsRect.left)
  137.             {
  138.             this.velocity.x = this.velocity.x*-1;
  139.             newPos.x += (this.velocity.x *2);
  140.             }
  141.         if (newPos.y>this.boundsRect.bottom || newPos.y<this.boundsRect.top)
  142.             {
  143.             this.velocity.y=this.velocity.y*-1;
  144.             newPos.y+= (this.velocity.y *2);
  145.             }
  146.         }
  147.     this.setPosition(newPos);
  148.     }
  149.  
  150. function noteObject(layerID,pos,z)
  151.     {
  152.     this.ancestor=new layerObject(layerID,
  153.                                     pos,
  154.                                     new Point(0,0),
  155.                                     z,
  156.                                     new rect(0,0,1000,1000),
  157.                                     false);
  158.     foster(this,this.ancestor);
  159.     this.defaultDepth=z;
  160.     this.home=pos;
  161.     }
  162.  
  163. function noteManager()
  164.     {
  165.     this.LayerList=new Array();
  166.     this.add=noteAdd;
  167.     this.select=noteSelect;
  168.     }
  169.  
  170. function noteAdd(LayerObj)
  171.     {
  172.     this.LayerList[this.LayerList.length]=LayerObj;
  173.     this.zone=new Point(LayerObj.position.x+160,LayerObj.position.y);
  174.     }
  175.  
  176. function noteSelect(LayerName)
  177.     {
  178.     for (var x=0;x<this.LayerList.length;x++)
  179.         {
  180.         if (this.LayerList[x].layerID==LayerName)
  181.             {
  182.             if (this.LayerList[x].depth==100)
  183.                 {
  184.                 this.LayerList[x].setZorder(this.LayerList[x].defaultDepth);
  185.                 this.LayerList[x].journey(this.LayerList[x].home,6);
  186.                 }
  187.             else
  188.                 {
  189.                 this.LayerList[x].setZorder(100);
  190.                 this.LayerList[x].journey(this.zone,6);
  191.                 }
  192.             }
  193.         else
  194.             {
  195.             this.LayerList[x].setZorder(this.LayerList[x].defaultDepth);
  196.             this.LayerList[x].journey(this.LayerList[x].home,6);
  197.             }
  198.         this.LayerList[x].draw();
  199.         }
  200.     }
  201.  
  202. function layerManager()
  203.     {
  204.     this.update=managerUpdate;
  205.     this.add=managerAdd;
  206.     this.draw=managerDraw;
  207.     this.layerList=new Array();
  208.     }
  209. function managerAdd(l)
  210.     {
  211.     this.layerList[this.layerList.length]=l;
  212.     l.draw();
  213.     l.show();
  214.     }
  215. function managerUpdate()
  216.     {
  217.     for (x=0;x<this.layerList.length;x++)
  218.         {
  219.         if (this.layerList[x].active)
  220.             this.layerList[x].update();
  221.         }
  222.     }
  223. function managerDraw()
  224.     {
  225.     for (x=0;x<this.layerList.length;x++)
  226.         {
  227.         if (this.layerList[x].active)
  228.             this.layerList[x].draw();
  229.         }
  230.     }
  231.  
  232. p=new Array();
  233. p[0]=new Area(25,30,125,75,"http://www.corrosive.co.uk/");
  234. p[1]=new Area(5,125,130,175,"http://www.corrosive.co.uk/");
  235. p[2]=new Area(115,100,225,126,"http://www.corrosive.co.uk/");
  236.  
  237. m=new map("m","container","topLayer",p);
  238. function Area(X1,Y1,X2,Y2,url)
  239.     {
  240.     this.left=X1;
  241.     this.top=Y1;
  242.     this.right=X2;
  243.     this.bottom=Y2;
  244.     this.url=url;
  245.     }
  246.  
  247. function map(name,container,top,areas)
  248.     {
  249.     this.name=name;
  250.     this.top=top;
  251.     this.container=container;
  252.     this.areas=areas;
  253.     this.writeMap=writeMap;
  254.     this. highlight=highlight;
  255.     this.reset=reset;
  256.     this.timeout=null;
  257.     }
  258. function writeMap (mapName)
  259.     {
  260.     document.write("<map name="+mapName+">");
  261.     for (x=0;x<this.areas.length;x++)
  262.         {
  263.         document.write("<area shape=\"RECT\" href='"+this.areas[x].url+"' 
  264. onMouseOver='"+this.name+".highlight("+x+")' ");
  265.         document.write("onMouseOut='"+this.name+".reset()' ");
  266.         document.write("COORDS=\""+this.areas[x].left+","+this.areas[x].top+" 
  267. "+this.areas[x].right+","+this.areas[x].bottom+"\">");
  268.         }
  269.     document.write("</map>");
  270.     }
  271. function highlight(num)
  272.     {
  273.     clearTimeout(this.timeout);
  274.     this.timeout=setTimeout(this.name+".reset()",5000);
  275.     L.layerProp(this.container,this.top).visibility="visible";
  276.     L.layerProp(this.container,this.top).clip.top=this.areas[num].top;
  277.     L.layerProp(this.container,this.top).clip.left=this.areas[num].left;
  278.     L.layerProp(this.container,this.top).clip.bottom=this.areas[num].bottom;
  279.     L.layerProp(this.container,this.top).clip.right=this.areas[num].right;
  280.     }
  281. function reset()
  282.     {
  283.     L.layerProp(this.container,this.top).visibility="hidden";
  284.     }
  285.  
  286. function init()
  287.     {
  288.     layerMan=new layerManager();
  289.     noteMan=new noteManager();
  290.     var yPos=30;
  291.     for (var x=1;x<=5;x++)
  292.         {
  293.         note=new noteObject("note"+x,new Point(10,yPos),x);
  294.         layerMan.add(note);
  295.         noteMan.add(note);
  296.         yPos+=30;
  297.         }
  298.     var xPos=200;
  299.     for (var y=1;y<=3;y++)
  300.         {
  301.         temp=new layerObject(
  302.             "heading"+y,
  303.             new Point (xPos,300),
  304.             new Point (random(30)-15,random(30)-15),
  305.             200,
  306.             new rect(180,30,500,400),
  307.             true
  308.             )
  309.         layerMan.add(temp);
  310.         xPos+=150;
  311.         }
  312.     cycle();
  313.     }
  314. function cycle()
  315.     {
  316.     layerMan.update();
  317.     layerMan.draw();
  318.     setTimeout("cycle()",20);
  319.     }
  320. </SCRIPT>
  321.  
  322. <STYLE TYPE="text/css">
  323. .shuffleClass{
  324.     POSITION: absolute;
  325.     WIDTH: 150px;
  326.     VISIBILITY: hidden;
  327.     }
  328. .headings{
  329.     POSITION:absolute;
  330.     FONT-WEIGHT:100;
  331.     FONT-FAMILY:sans-serif;
  332.     COLOR:#0066cc;
  333.     FONT-SIZE:24pt;
  334.     VISIBILITY:hidden;
  335.     }
  336. .maps{
  337.     POSITION:absolute;
  338.     }
  339. #container{
  340.     POSITION:absolute;
  341.     TOP: 130;
  342.     LEFT:250;
  343.     VISIBILITY: visible;
  344.     }
  345. #topLayer{
  346.     VISIBILITY:hidden;
  347.     }
  348. ink, A:visited, A:active{
  349.     COLOR:#0D20AE;
  350.     FONT-WEIGHT:bold;
  351.     FONT-FAMILY: sans-serif;
  352.     TEXT-DECORATION: none
  353.     }
  354. </STYLE>
  355.  
  356. <BODY BGCOLOR="#ffffff" onLoad="init()">
  357. <SCRIPT>
  358. m.writeMap("myMap");
  359. </SCRIPT>
  360. <DIV ID="note1" CLASS="shuffleClass">
  361. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=#CBD5FF CELLPADDING=10 BORDER=1>
  362. <TR><TD VALIGN=TOP>
  363. <A HREF="JavaScript:noteMan.select('note1');">About Us</A>
  364. <P>
  365. links and information
  366. </P>
  367. </TD></TR>
  368. </TABLE>
  369. </DIV>
  370.  
  371. <DIV ID="note2" CLASS="shuffleClass">
  372. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=#CBD5FF CELLPADDING=10 BORDER=1>
  373. <TR><TD VALIGN=TOP>
  374. <A HREF="JavaScript:noteMan.select('note2');">Clients</A>
  375. <P>
  376. links and information
  377. </P>
  378. </TD></TR>
  379. </TABLE>
  380. </DIV>
  381.  
  382. <DIV ID="note3" CLASS="shuffleClass">
  383. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=#CBD5FF CELLPADDING=10 BORDER=1>
  384. <TR><TD VALIGN=TOP>
  385. <A HREF="JavaScript:noteMan.select('note3');">Freebies</A>
  386. <P>
  387. links and information
  388. </P>
  389. </TD></TR>
  390. </TABLE>
  391. </DIV>
  392.  
  393. <DIV ID="note4" CLASS="shuffleClass">
  394. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=#CBD5FF CELLPADDING=10 BORDER=1>
  395. <TR><TD VALIGN=TOP>
  396. <A HREF="JavaScript:noteMan.select('note4');">Links</A>
  397. <P>
  398. links and information
  399. </P>
  400. </TD></TR>
  401. </TABLE>
  402. </DIV>
  403.  
  404. <DIV ID="note5" CLASS="shuffleClass">
  405. <TABLE HEIGHT=200 WIDTH=150 BGCOLOR=#CBD5FF CELLPADDING=10 BORDER=1>
  406. <TR><TD VALIGN=TOP>
  407. <A HREF="JavaScript:noteMan.select('note5');">Welcome</A>
  408. <P>
  409. links and information
  410. </P>
  411. </TD></TR>
  412. </TABLE>
  413. </DIV>
  414.  
  415. <DIV ID="container">
  416.     <DIV ID="bottomLayer" CLASS="maps">
  417.     <IMG SRC="res/apple1.gif" USEMAP="#myMap" BORDER=0>
  418.     </DIV>
  419.     <DIV ID="topLayer" CLASS="maps">
  420.     <IMG NAME=TEST SRC="res/apple2.gif" USEMAP="#myMap" BORDER=0>
  421.     </DIV>
  422. </DIV>
  423.  
  424. <DIV ID="heading1" CLASS="headings">
  425. Dynamic
  426. </DIV>
  427. <DIV ID="heading2" CLASS="headings">
  428. Web
  429. </DIV>
  430. <DIV ID="heading3" CLASS="headings">
  431. Design
  432. </DIV>
  433. </BODY>
  434. </HTML>
  435.