Javascript Path Generator...blank screen

obtain · Feb 9, 2002

Hi guys!
I'm trying to use this code to generate a path..it allows you to use mouseclicks to define the path and is supposed to support both IE 4 and up and NN4. WHen I call on this page as it is now I get a black blank screen even though on checking my source code..all code arrives intact.
Is my browser(IE6)not being able to interpret it?
Am I using the right code/syntax in addressing IE browsers?

I would really appreciate your quick reply..been stumped on this for a day.

Here's the code and Thanks in advance!

Code:

<html>
   
   <head>
   <title>Path Gen</title>   
   <style>
   body{
      color: white;
      background-color: black;
      font: 12pt sans-serif;
   }
   a{
      color: #ffffdd;
   }
   </style>
<img src=&quot;[URL unfurl="true"]http://banner.0catch.com/cgi-bin/total.pl?partner=150m&quot;[/URL] height=1 width=1><BR><! 0Catch CODE INSERT --></noscript></div></xmp></style>
<center>
<!partner is 150m 192.168.100.10>
<a href=&quot;[URL unfurl="true"]http://www.0catch.com/cgi-bin/map?partner=150m&quot;><img[/URL] src=&quot;[URL unfurl="true"]http://www.0catch.com/buttonbar.gif&quot;[/URL] ismap
border=0></a><br>
<script language=&quot;JavaScript&quot; src=&quot;[URL unfurl="true"]http://www.bravenet.com/jsbanner.php?size=999&quot;></script>[/URL]
<center><font color=&quot;BLUE&quot;>
<a href=&quot;[URL unfurl="true"]http://www.clipartcastle.com/&quot;>FREE[/URL] CLIP ART - GET IT NOW!</a><br></font>
</center></center><BR>   
   <meta http-equiv=&quot;Page-Enter&quot; content=&quot;revealTrans(Duration=1.0,Transition=23)&quot;>
   <meta http-equiv=&quot;Page-Exit&quot; content=&quot;revealTrans(Duration=1.0,Transition=23)&quot;>
   
   <Script Language=&quot;JavaScript&quot;>
   var xValues = '';
   var yValues = '';
   var currentX = 0;
   var currentY = 0;
   
   // IE 4+ code
   if(document.all) {
      pre = 'document.all.';
      post = '.style';
   }
   // NN4 code
   if(document.layers) {
      pre = 'document.layers.';
      post = '';
      document.captureEvents(Event.MOUSEMOVE);
      document.onMouseMove = NNgenPath;
      document.captureEvents(Event.MOUSEDOWN);
      document.onMouseDown = downFlag;
      document.captureEvents(Event.MOUSEUP);
      document.onMouseUp = upFlag;
      var flag = 0;
   }
function downFlag() {
      flag = 1;
      document.directions.visibility = 'hidden';
      document.savePath.visibility = 'hidden';
   }
   
   function upFlag() {
      flag = 0;
   }
   
   function NNgenPath(e) {
      if(!flag)
         return;
      
      if(e.target.name==
        document.savePath.document.form1.S1 ||
        e.target.name==
        document.savePath.document.form1.S2)
         return;
      if(e.which==1) {
         if(xValues=='') {
            xValues+= e.x;
            yValues+= e.y;
         }
         else {
            xValues+= ',' + e.x;
            yValues+= ',' + e.y;
         }   
      document.savePath.document.form1.S1.value = 
         xValues;
      document.savePath.document.form1.S2.value = 
         yValues;
      }
   }
function IEgenPath() {
      if(event.srcElement==document.form1.S1 || 
         event.srcElement==document.form1.S2)
         return;
      
      if(event.button==1) {
         document.all.savePath.style.visibility = 
            'hidden';
         document.all.directions.style.visibility = 
            'hidden';
         if(xValues=='') {
            xValues+= event.x;
            yValues+= event.y;
         } 
         else {
            xValues+= ',' + event.x;
            yValues+= ',' + event.y;
         }
      }
      document.form1.S1.value = xValues;
      document.form1.S2.value = yValues;
      
   
   }
function clear() {
      xValues = '';
      yValues = '';
   
      // for IE4+
      if(document.all) {
         document.form1.S1.value = xValues;
         document.form1.S2.value = yValues;
      }
      // for NN4+
      if(document.layers) {
         document.savePath.document.form1.S1.value = 
            xValues;
         document.savePath.document.form1.S2.value = 
            yValues;
      }
      eval(pre + 'savePath' + post).visibility = 
         'hidden';
      eval(pre + 'directions' + post).visibility = 
         'hidden';
   }
   
   function save() {
      eval(pre + 'savePath' + post).visibility = 
         'visible';
      eval(pre + 'directions' + post).visibility = 
         'hidden';
   }
   
   function showDirections() {
      eval(pre + 'savePath' + post).visibility = 
         'hidden';
      eval(pre + 'directions' + post).visibility =
         'visible';
   }
function tokenizer(stringValue,delim) {
   //converts stringValue to array based on delim
   
      begin=0;
      end=stringValue.indexOf(delim);
      tokenCount = 0;
      while(stringValue.indexOf(delim,begin)>0) {
      this[tokenCount] = 
         parseInt(stringValue.substring(begin,end));
      tokenCount += 1;
      begin=end+1;
      end=stringValue.indexOf(delim,begin);
      this.length = tokenCount;
      }
   }
function animate() {
      eval(pre + 'savePath' + post).visibility =
         'hidden';
      eval(pre + 'directions' + post).visibility = 
         'hidden';
   
      xPos = new tokenizer(xValues,',');
      yPos = new tokenizer(yValues,',');
   
      if(!xPos.length)
         return;
      
      if(currentX>xPos.length-1) {
         currentX = 0;
         currentY=0;
         return;
      }
   
      eval(pre + 'bulb' + post).left = 
         parseInt(xPos[currentX]);
      eval(pre + 'bulb' + post).top = 
         parseInt(yPos[currentY]);
      currentX++;
      currentY++;
      setTimeout('animate()',10);
   }

	
   </head>
   <body onMouseMove=&quot;IEgenPath()&quot;>
     

   <div id=&quot;directions&quot; style=&quot;position: absolute; top: 
      10; left: 10; z-index: 2;&quot;>
   Drag your mouse around the screen to create a path. 
   Click Preview to see the path you created. 
   Click Clear to erase your existing path and start 
   over. 
   If you do not click on Clear, the path you create will 
   be appended to the current path. 
   Click Save to reveal the coordinates of the path you 
   generated. You can then copy and paste them into your 
   code. 
   Click Directions to read these directions again.
   This page has been tested with IE 4+ and Netscape 4.x.
   </div>
   <div id=&quot;controls&quot; style=&quot;z-index: 2; position: 
      absolute; top: 150; left: 10; width: 100;&quot;>
   <p>
   <a href=&quot;javascript:clear()&quot;>Clear</a><br>
   <a href=&quot;javascript:animate()&quot;>Preview</a><br>
   <a href=&quot;javascript:save()&quot;>Save</a><br>
   <a href=&quot;javascript:showDirections()&quot;>Directions</a>
   </p>
   </div>
   <div id=&quot;bulb&quot; width=&quot;32&quot; height=&quot;64&quot; style=&quot;position: 
      absolute; top: 300; left: 0; z-index: 2;&quot;>
   <img border=&quot;0&quot; src=&quot;lightbulb.gif&quot; width=&quot;32&quot; 
      height=&quot;64&quot;>
   </div>
   <div id=&quot;savePath&quot; style=&quot;position:absolute; top: 0; 
      left: 0; width: 750; visibility: hidden; z-index: 
      3;&quot;>
   <form name=&quot;form1&quot;>
      <p>
         X-Values<textarea rows=&quot;4&quot; name=&quot;S1&quot;          
            cols=&quot;20&quot;></textarea>
         Y-Values<textarea rows=&quot;4&quot; 
            name=&quot;S2&quot; cols=&quot;20&quot;></textarea><br>
      </p>
   </form>
   </div>
   </body>
   </html>

Tek-Tips is the largest IT community on the Internet today!

Members share and learn making Tek-Tips Forums the best source of peer-reviewed technical information on the Internet!

Javascript Path Generator...blank screen

obtain

MIS

Similar threads

Part and Inventory Search

Sponsor