Double07Devon11
08-12-2003, 11:02 AM
Ok, newbie talking here;) I can't get this javascript working, I need it to show the table for that specified category and I would like it to fade and make it close if the mouseclicks outside the table,lol I havnt used Javascript in a long time so I kinda forgot most of it:rolleyes:. please fix my coding to do this, here is my website coding:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Xtreme Site Development :: The Xtreme Site For Xtreme
Developers!</title>
<meta http-equiv="Page-Enter" content="blendtrans(duration=2.0)">
<meta name="description" content="Here at XSD you can get website tutorials, website designs, website tools, and even get a website made just for you!" />
<meta name="keywords" content="Designs, Tools, Tutorials, HTML, CSS, PHP, mySQL, SSI, XHTML, DHTML, Perl, C++, website, help, site, forums, vbulletin, host" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Double07Devon11" />
<meta name="reply-to" content="webmaster@xtremesitedev.com" />
<meta name="language" content="English" />
<meta name="classification" content="website development" />
<meta name="distribution" content="Global" />
<link rel="stylesheet" href="body.css" type="text/css" />
<script language="javascript" src="fade.js"></script>
<script language="javascript" src="iframes.js"></script>
</head>
<body onLoad="showHide1();showHide2();showHide3();showHide4();">
<!-- Copyright 2003 all rights reserved Xtreme Site Development -->
<div class="logo"><img src="logo.gif" alt="Xtreme Site Development!" /></div>
<div class="nav"><img src="nav.gif" alt="Navigation" /></div>
<div class="main"><img onMouseover="showHide1();" onMouseOut="showHide1();" src="nav_main.gif" alt="Main" /></div>
<div class="tuts"><img onMouseover="showHide2();" onMouseOut="showHide2();" src="nav_tutorials.gif" alt="Tutorials" /></div>
<div class="links"><img onMouseover="showHide3();" onMouseOut="showHide3();" src="nav_links.gif" alt="Links" /></div>
<div class="misc"><img onMouseover="showHide4();" onMouseOut="showHide4();" src="nav_misc.gif" alt="Misc" /></div>
<div class="end"><img src="nav_bottom.gif" alt="End" /></div>
<div class="topic"><img src="topic_welcome.gif" alt="Welcome!" /></div>
<div class="text"><iframe src="index.htm" /></div>
<div class="counter"><img src='http://www.AceJS.com/cgi-sys/Count.cgi?df=2234.dat|display=Counter|ft=2|md=6|frgb=0;0;0|dd=D'></div>
<div class="main2"><table id="table_1" style="display: block;">
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="index.htm" id="index" onClick="changeUrl()">Index</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="forums/">Message Board</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="designs.htm">Designs</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="scripts.htm">Scripts</a>
</td></tr></table></div>
<div class="tuts2"><table id="table_2" style="display: block;">
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="photoshop.htm">PhotoShop</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="html.htm">HTML</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="xhtml.htm">XHTML</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="css.htm">CSS</a>
</td></tr></table></div>
<div class="links2"><table id="table_3" style="display: block;">
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="partners.htm">Affiliates</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="fhosts.htm">Free Hosts</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="phosts.htm">Paid Hosts</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="programs.htm">Programs</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="us.htm">User Submited</a>
</td></tr></table></div>
<div class="misc2"><table id="table_4" style="display: block;">
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="mailto:Webmaster@websitedev.com">Contact Me</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="privacy.htm">Privacy Policy</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="copyright.htm">Copyright</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="css.htm">CSS</a>
</td></tr></table></div>
</body>
</html>
and here is my external css:
body {
scrollbar-face-color: black;
scrollbar-highlight-color: gray;
scrollbar-shadow-color:gray;
scrollbar-3dlight-color:gray;
scrollbar-arrow-color:limegreen;
scrollbar-track-color: black;
scrollbar-darkshadow-color:gray;
font-size: 8pt;
color:white;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url("bg.gif");
background-repeat: repeat-y;
background-color: black;
}
a:link {
font-size: 8pt;
font-weight:450;
color: white;
text-decoration: none;
font-family:arial;
background-image: url("textarea.gif");
}
a:visited {
font-size: 8pt;
font-weight:450;
color: white;
text-decoration: none;
font-family:arial;
background-image: url("textarea.gif");
}
a:hover {
font-size: 8pt;
font-weight:450;
color: limegreen;
text-decoration: underline;
font-family:arial;
font-variant:small-caps;
background-image: url("textarea.gif");
}
tr, td {
border-size: 2;
border-color: limegreen;
background-color: black;
}
div.logo {
position:absolute;
top:25px;
left:100px;
z-index:2;
}
div.nav {
position:absolute;
top:145px;
left:0px;
z-index:1;
}
div.main {
position:absolute;
top:170px;
left:0px;
z-index:2;
}
div.main2 {
position:absolute;
top:170px;
left:126px;
z-index:3;
border:#003300 1pt;
background-color:black;
color:white;
}
div.tuts {
position:absolute;
top:190px;
left:0px;
z-index:2;
}
div.tuts2 {
position:absolute;
top:190px;
left:126px;
z-index:3;
border:#003300 1pt;
background-color:black;
color:white;
}
div.links {
position:absolute;
top:210px;
left:0px;
z-index:2;
}
div.links2 {
position:absolute;
top:210px;
left:126px;
z-index:3;
border:#003300 1pt;
background-color:black;
color:white;
}
div.misc {
position:absolute;
top:230px;
left:0px;
z-index:2;
}
div.misc2 {
position:absolute;
top:230px;
left:126px;
z-index:3;
border:#003300 1pt;
background-color:black;
color:white;
}
div.end {
position:absolute;
top:250px;
left:0px;
z-index:1;
filter:flipv;
}
div.topic {
position:absolute;
top:170px;
left:190px;
z-index:2;
}
div.text {
position:absolute;
top:200px;
left:170px;
z-index:2;
background-color:transparent;
}
tr.cells, td.cells {
width:1.25in;
border:solid lime 1.0pt;
height:10pt;
background-image: url("textarea.gif");
}
input {
background-image: url("input.gif");
background-repeat: repeat-x;
background-color: gray;
background-align: center;
border: outset 1px;
color: white;
font-size:6pt;
}
textarea, blockquote {
background-image: url("textarea.gif");
color: white;
font-family:arial;
font-variant:small-caps;
border: none;
}
div.counter {
position:absolute;
top:275px;
left:170px;
z-index:3;
background-color:transparent;
}
and finally the javascript:
function showHide1() {
obj = document.getElementById("table_1");
if(obj.style.display == "block") obj.style.display = "none";
else obj.style.display = "block";
}
function showHide2() {
obj = document.getElementById("table_2");
if(obj.style.display == "block") obj.style.display = "none";
else obj.style.display = "block";
}
function showHide3() {
obj = document.getElementById("table_3");
if(obj.style.display == "block") obj.style.display = "none";
else obj.style.display = "block";
}
function showHide4() {
obj = document.getElementById("table_4");
if(obj.style.display == "block") obj.style.display = "none";
else obj.style.display = "block"
}
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<title>Xtreme Site Development :: The Xtreme Site For Xtreme
Developers!</title>
<meta http-equiv="Page-Enter" content="blendtrans(duration=2.0)">
<meta name="description" content="Here at XSD you can get website tutorials, website designs, website tools, and even get a website made just for you!" />
<meta name="keywords" content="Designs, Tools, Tutorials, HTML, CSS, PHP, mySQL, SSI, XHTML, DHTML, Perl, C++, website, help, site, forums, vbulletin, host" />
<meta name="robots" content="index,follow" />
<meta name="author" content="Double07Devon11" />
<meta name="reply-to" content="webmaster@xtremesitedev.com" />
<meta name="language" content="English" />
<meta name="classification" content="website development" />
<meta name="distribution" content="Global" />
<link rel="stylesheet" href="body.css" type="text/css" />
<script language="javascript" src="fade.js"></script>
<script language="javascript" src="iframes.js"></script>
</head>
<body onLoad="showHide1();showHide2();showHide3();showHide4();">
<!-- Copyright 2003 all rights reserved Xtreme Site Development -->
<div class="logo"><img src="logo.gif" alt="Xtreme Site Development!" /></div>
<div class="nav"><img src="nav.gif" alt="Navigation" /></div>
<div class="main"><img onMouseover="showHide1();" onMouseOut="showHide1();" src="nav_main.gif" alt="Main" /></div>
<div class="tuts"><img onMouseover="showHide2();" onMouseOut="showHide2();" src="nav_tutorials.gif" alt="Tutorials" /></div>
<div class="links"><img onMouseover="showHide3();" onMouseOut="showHide3();" src="nav_links.gif" alt="Links" /></div>
<div class="misc"><img onMouseover="showHide4();" onMouseOut="showHide4();" src="nav_misc.gif" alt="Misc" /></div>
<div class="end"><img src="nav_bottom.gif" alt="End" /></div>
<div class="topic"><img src="topic_welcome.gif" alt="Welcome!" /></div>
<div class="text"><iframe src="index.htm" /></div>
<div class="counter"><img src='http://www.AceJS.com/cgi-sys/Count.cgi?df=2234.dat|display=Counter|ft=2|md=6|frgb=0;0;0|dd=D'></div>
<div class="main2"><table id="table_1" style="display: block;">
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="index.htm" id="index" onClick="changeUrl()">Index</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="forums/">Message Board</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="designs.htm">Designs</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="scripts.htm">Scripts</a>
</td></tr></table></div>
<div class="tuts2"><table id="table_2" style="display: block;">
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="photoshop.htm">PhotoShop</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="html.htm">HTML</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="xhtml.htm">XHTML</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="css.htm">CSS</a>
</td></tr></table></div>
<div class="links2"><table id="table_3" style="display: block;">
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="partners.htm">Affiliates</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="fhosts.htm">Free Hosts</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="phosts.htm">Paid Hosts</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="programs.htm">Programs</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="us.htm">User Submited</a>
</td></tr></table></div>
<div class="misc2"><table id="table_4" style="display: block;">
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="mailto:Webmaster@websitedev.com">Contact Me</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="privacy.htm">Privacy Policy</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="copyright.htm">Copyright</a>
</td></tr>
<tr><td width="75" valign=center class="cells">
<img src="plus.gif" /> <a href="css.htm">CSS</a>
</td></tr></table></div>
</body>
</html>
and here is my external css:
body {
scrollbar-face-color: black;
scrollbar-highlight-color: gray;
scrollbar-shadow-color:gray;
scrollbar-3dlight-color:gray;
scrollbar-arrow-color:limegreen;
scrollbar-track-color: black;
scrollbar-darkshadow-color:gray;
font-size: 8pt;
color:white;
font-family: Verdana, Arial, Helvetica, sans-serif;
background-image: url("bg.gif");
background-repeat: repeat-y;
background-color: black;
}
a:link {
font-size: 8pt;
font-weight:450;
color: white;
text-decoration: none;
font-family:arial;
background-image: url("textarea.gif");
}
a:visited {
font-size: 8pt;
font-weight:450;
color: white;
text-decoration: none;
font-family:arial;
background-image: url("textarea.gif");
}
a:hover {
font-size: 8pt;
font-weight:450;
color: limegreen;
text-decoration: underline;
font-family:arial;
font-variant:small-caps;
background-image: url("textarea.gif");
}
tr, td {
border-size: 2;
border-color: limegreen;
background-color: black;
}
div.logo {
position:absolute;
top:25px;
left:100px;
z-index:2;
}
div.nav {
position:absolute;
top:145px;
left:0px;
z-index:1;
}
div.main {
position:absolute;
top:170px;
left:0px;
z-index:2;
}
div.main2 {
position:absolute;
top:170px;
left:126px;
z-index:3;
border:#003300 1pt;
background-color:black;
color:white;
}
div.tuts {
position:absolute;
top:190px;
left:0px;
z-index:2;
}
div.tuts2 {
position:absolute;
top:190px;
left:126px;
z-index:3;
border:#003300 1pt;
background-color:black;
color:white;
}
div.links {
position:absolute;
top:210px;
left:0px;
z-index:2;
}
div.links2 {
position:absolute;
top:210px;
left:126px;
z-index:3;
border:#003300 1pt;
background-color:black;
color:white;
}
div.misc {
position:absolute;
top:230px;
left:0px;
z-index:2;
}
div.misc2 {
position:absolute;
top:230px;
left:126px;
z-index:3;
border:#003300 1pt;
background-color:black;
color:white;
}
div.end {
position:absolute;
top:250px;
left:0px;
z-index:1;
filter:flipv;
}
div.topic {
position:absolute;
top:170px;
left:190px;
z-index:2;
}
div.text {
position:absolute;
top:200px;
left:170px;
z-index:2;
background-color:transparent;
}
tr.cells, td.cells {
width:1.25in;
border:solid lime 1.0pt;
height:10pt;
background-image: url("textarea.gif");
}
input {
background-image: url("input.gif");
background-repeat: repeat-x;
background-color: gray;
background-align: center;
border: outset 1px;
color: white;
font-size:6pt;
}
textarea, blockquote {
background-image: url("textarea.gif");
color: white;
font-family:arial;
font-variant:small-caps;
border: none;
}
div.counter {
position:absolute;
top:275px;
left:170px;
z-index:3;
background-color:transparent;
}
and finally the javascript:
function showHide1() {
obj = document.getElementById("table_1");
if(obj.style.display == "block") obj.style.display = "none";
else obj.style.display = "block";
}
function showHide2() {
obj = document.getElementById("table_2");
if(obj.style.display == "block") obj.style.display = "none";
else obj.style.display = "block";
}
function showHide3() {
obj = document.getElementById("table_3");
if(obj.style.display == "block") obj.style.display = "none";
else obj.style.display = "block";
}
function showHide4() {
obj = document.getElementById("table_4");
if(obj.style.display == "block") obj.style.display = "none";
else obj.style.display = "block"
}