I have this bit of code (example1)for tabs that I would to run on an external sheet so that I can replace the forms with some rather long forms I have made in html so that I can keep the html code intact. I have seen it done
as in (example2) but I need it to loof and function exactly as example1.
I do have the external js & css sheets for example2.

Thanks in advance


Code:

<html>
<head>
<title></title>

<script type="text/javascript"><!--
function stopErrors() {
 return true;
}
window.onerror = stopErrors;
//--></script>
<script language="Javascript" type="text/javascript"><!--

function selectAll(theField) {
var tempval=eval("document."+theField)
tempval.focus()
tempval.select()
}
//--></script>

<style type="text/css"><!-- 

.pane {
  display : none;
  }
td.tabs {
  border-top : medium outset #00ced1;
  border-left : medium outset #00ced1;
  border-bottom : medium outset #00ced1;
  border-right : medium outset #00ced1;

  }
div.tabs {
  background-color : #00ffff;
  cursor : hand;
  }
//--></style>

<style type="text/css"><!-- 
input.txt {
  position : absolute;
  left : 120px;
  }
input.chk {
  position : relative;
  }
//--></style>
<script type="text/javascript"><!-- 
var currentPaneStyle = 0;
var currentTab = 0;

function tabstrip()
{
   this.tabs = new Array();
   this.add = addTab;
   this.write = writeTabstrip;
}

function tab(caption,content)
{
  this.setId = setId;
  this.caption = caption;
  this.content = content;
  this.write = writeTab;
  this.writeContent = writePane;
}



function addTab(tab)
{
  tab.setId("tab" + this.tabs.length);
  this.tabs[this.tabs.length] = tab;
}

function setId(id)
{
  this.id = id;
}

function initiate()
{
  var div = document.getElementById("tab0");
  showPane(div);
}

function showPane(div)
{
  if(currentTab != 0)
  {
    currentTab.style.backgroundColor = "#e0ffff";
  }
  div.style.backgroundColor = "#00ced1";
  currentTab = div;

  if(currentPaneStyle != 0)
    currentPaneStyle.display = "none";
  var paneId = "pn_" + div.id;
  var objPaneStyle = document.getElementById(paneId).style;
  objPaneStyle.display = "block";
  currentPaneStyle = objPaneStyle;
}

function SubmitForm()
{
   window.alert("Form submitted.  This would normally take you to another page");
   // normally, you would here check the form and submit it.
   // if the form has the name 'tabform', then it is submitted
   // with tabform.submit();
}

function writePane()
{
  document.write("<div class='pane' id='pn_" + this.id + "'>" + this.content + "</div>");
}

function writeTab()
{
   document.write("<td class='tabs'><div class='tabs' id='" + this.id + "' onclick='showPane(this)'>" + this.caption + "</div></td>");
}

function writeTabstrip()
{
  document.write("<table class='tabs'><tr>");
  for(var i = 0; i < this.tabs.length; i++)
  {
    this.tabs[i].write();
  }
  document.write("</tr></table>");
  
  for(var k = 0; k < this.tabs.length; k++)
  {
    this.tabs[k].writeContent();
  }
  initiate();
}
//--></script>

</head>
<body>

<form name="tabform" method="post" action="mailto:youremailaddress@yourdomain.com">
<script type="text/javascript">

<!-- 
var pane1 = "<table border=1 bordercolor=8b0000><tr><td>Operating system:<br><input type='radio' name='rComp' checked>Windows</input><br><input type='radio' name='rComp'>Mac</input><br><input type='radio' name='rComp'>Unix</input></td><td rowspan=2>Preferred download location:<br><input type='radio' name='rSrv' checked>USA (Florida)</input><br><input type='radio' name='rSrv'>Europe (UK)</input><br><input type='radio' name='rSrv'>Europe (Sweden)</input><br><input type='radio' name='rSrv'>Asia (Japan)</input><br><input type='radio' name='rSrv'>Asia (Taiwan)</input></td></tr><tr><td>Preferred format:<br><select name='selFormat'><option>HTML</option><option>PDF</option><option>Word</option><option>ASCII text</option><option>XML</option></select></td></tr></table>";

var pane2 = "First name: <input type='text' class='txt' name='inpFirst' size=20></input><br>Last name: <input type='text' class='txt' name='inpLast' size=20></input><br>Address 1: <input type='text' class='txt' name='inpAdr1' size=20></input><br>Address 2: <input type='text' class='txt' name='inpAdr2' size=20></input><br>City : <input type='text' class='txt' name='inpCity' size=20></input><br>Postcode/ZIP: <input type='text' class='txt' name='inpPC' size=20></input><br>E-Mail: <input type='text' class='txt' name='inpEmail' size=20></input>";

var pane3 = "Enter message here:<br><textarea cols=50 rows=6></textarea>";

var pane4 = "<table border=1 bordercolor=8b0000><tr><td width=100><input name='cSport' type='checkbox' class='chk'>Sport</input><br><input type='checkbox' class='chk' name='cGifts'>Gifts</input><br><input type='checkbox' class='chk' name='cHealth'>Health</input><br></td><td width=100><input name='cInet' type='checkbox' class='chk'>Internet</input><br><input type='checkbox' class='chk' name='cGames'>Games</input><br><input type='checkbox' class='chk' name='cTech'>Technology</input></td><td width=100><input name='cBooks' type='checkbox' class='chk'>Books</input><br><input type='checkbox' name='cFash'>Fashion</input><br><input type='checkbox' class='chk' name='cCars'>Cars</input><br></td></tr></table>";

var pane5 = "<hr><p>This is a test of a javascript simulating a tab control<hr>";

var ts = new tabstrip();
var t1 = new tab("System",pane1);
var t2 = new tab("Personal",pane2);
var t3 = new tab("Message",pane3);
var t4 = new tab("Interests",pane4);
var t5 = new tab("About",pane5);
ts.add(t1);
ts.add(t2);
ts.add(t3);
ts.add(t4);
ts.add(t5);

ts.write();
//--></script>
</form>
<button onclick="SubmitForm()">Submit</button><br><br>

</BODY></HTML>
EXAMPLE2

Code:
<html>
   <head>
      <title>OOP Tabbed UI</title>
      <link rel="stylesheet" type="text/css"
         href="horiz.css"></link>
      <script language="JavaScript" 
         src="oopTabbedUI.js">
      </script>
   </head>
   <body>
   <script language="JavaScript">
      //explicit declaration of tab and panel
      var tabOne = new tab("tab1",
         "XML HomePage",10,10,150);
      var panelOne = new panel 
         ("panel1","file:///c:\\xml\\index.htm");
      var tabPanelOne = new tabPanel(tabOne,panelOne);
      tabPanelOne.writeTabPanel();




   
      //anonymous declaration of tab and panel
      var tabPanelTwo = new tabPanel(
         new tab("tab2","XML Overview",10,160,150),
         new panel("panel2",
            "file:///c:\\xml\\overview.xml"));
         tabPanelTwo.writeTabPanel();
   
   //show first panel
   showPanel("tab1","panel1");
   </script>
 </body>
   </html>