I have been trying this for a while without success. Please help out.
The following code is a working code but the javascript is hard coded. I want to use a for loop to replace it. But I have tried many tricks without success. Your help is deeply appreciated.
The complete Code:
==========================
==========
==========
==
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"
http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<title>Dropdowns</title>
<style type="text/css">
table.navBar
{
border-top: 1px;
solid #FFF;
font-size:100%;
position:absolute;
visibility:hidden;
}
table.menu
{
font-size:100%;
position:absolute;
visibility:hidden;
}
#navigation { position: static; top: 150; left: 150; width:763px}
#posRight {position: relative; left: 360px; }
#posLeft {position: relative; left: 0px; }
.navbar td { border-right: 1px solid #FFF; padding: 4px 9px; background-color: #001B6A; color: #FFF; font-family: Arial,sans-serif; font-size: 11px; font-weight: bold; text-align: center }
#nbclass { border: 1px solid #000; padding: 2px 0px; background-color: #5A84FF; font-size: 14px }
#nbrule { border-top: 1px solid #FFF; padding: 0px; background-color: #000 }
#nbsel { background-color: #5F87FF }
div.child { width: 403px; border-width: 0px 1px 1px 0px; border-style: solid; border-color: #ADADAD }
.child table { border: 1px solid #000; border-top: 0px; background-color: #FFF }
.child td { padding: 0px 1px 1px 0px; background-color: #ADB5AD; font-size: 11px; font-family: Arial,sans-serif }
.child td div { margin: 0px }
td .col { border: 1px solid #00186B }
.cat, .itm { border-bottom: 1px solid #ADADAD; padding: 2px 3px; background-color: #FFF }
.cat { font-weight: bold }
.cat img { margin-right: 5px }
.cat .new { color: #FF0000 }
.itm a, .cat a { text-decoration: none }
.itm a, .itm a:hover, .itm a:visited, .itm a:active { color: #42425D }
.cat a, .cat a:hover, .cat a:visited, .cat a:active { color: #383843 }
.csel { background-color: #D3D4ED }
</style>
<script type="text/javascript"><!-
-//--><![C
DATA[//><!
--
var TIMER;
startList = function() {
navBar = document.getElementById("n
av").rows[
0].cells;
navBar[0].onmouseover=func
tion() {
document.getElementById("t
utorials")
.style.vis
ibility="v
isible"
}
navBar[0].onmouseout=funct
ion() {
TIMER=setTimeout('document
.getElemen
tById("tut
orials").s
tyle.visib
ility="hid
den"', 500);
}
document.getElementById("t
utorials")
.onmouseov
er=functio
n(){
clearTimeout(TIMER);
document.getElementById("t
utorials")
.style.vis
ibility="v
isible";
}
document.getElementById("t
utorials")
.onmouseou
t=function
(){
TIMER=setTimeout('document
.getElemen
tById("tut
orials").s
tyle.visib
ility="hid
den"', 500);
}
navBar[1].onmouseover=func
tion() {
document.getElementById("s
cripting")
.style.vis
ibility="v
isible"
}
navBar[1].onmouseout=funct
ion() {
TIMER=setTimeout('document
.getElemen
tById("scr
ipting").s
tyle.visib
ility="hid
den"', 500);
}
document.getElementById("s
cripting")
.onmouseov
er=functio
n(){
clearTimeout(TIMER);
document.getElementById("s
cripting")
.style.vis
ibility="v
isible";
}
document.getElementById("s
cripting")
.onmouseou
t=function
(){
TIMER=setTimeout('document
.getElemen
tById("scr
ipting").s
tyle.visib
ility="hid
den"', 500);
}
navBar[2].onmouseover=func
tion() {
document.getElementById("v
alidation"
).style.vi
sibility="
visible"
}
navBar[2].onmouseout=funct
ion() {
TIMER=setTimeout('document
.getElemen
tById("val
idation").
style.visi
bility="hi
dden"', 500);
}
document.getElementById("v
alidation"
).onmouseo
ver=functi
on(){
clearTimeout(TIMER);
document.getElementById("v
alidation"
).style.vi
sibility="
visible";
}
document.getElementById("v
alidation"
).onmouseo
ut=functio
n(){
TIMER=setTimeout('document
.getElemen
tById("val
idation").
style.visi
bility="hi
dden"', 500);
}
}
window.onload=startList;
//--><!]]></script>
</head>
<body>
<div id="navigation">
<table id="nav" "width="763" cellpadding="0" cellspacing="0" border="0" class="navbar">
<tr>
<td >Tutorials</a><br /></td>
<td>Scripting</a><br /></td>
<td>Validation</a><br /></td>
</tr>
</table>
</div>
<div id="posLeft">
<table class="menu" id="tutorials" width="120">
<tr><td><a href="/html/default.asp">H
TML</a></t
d></tr>
<tr><td><a href="/xhtml/default.asp">
XHTML</a><
/td></tr>
<tr><td><a href="/css/default.asp">CS
S</a></td>
</tr>
<tr><td><a href="/xml/default.asp">XM
L</a></td>
</tr>
<tr><td><a href="/xsl/default.asp">XS
L</a></td>
</tr>
</table>
<table class="menu" id="scripting" width="120">
<tr><td class="menu"><a href="/js/default.asp">Jav
aScript</a
></td></tr
>
<tr><td class="menu"><a href="/vbscript/default.as
p">VBScrip
t</a></td>
</tr>
<tr><td class="menu"><a href="default.asp">DHTML</
a></td></t
r>
<tr><td class="menu"><a href="/asp/default.asp">AS
P</a></td>
</tr>
<tr><td class="menu"><a href="/ado/default.asp">AD
O</a></td>
</tr>
</table>
<table class="menu" id="validation" width="120">
<tr><td><a href="/site/site_validate.
asp">Valid
ate HTML</a></td></tr>
<tr><td><a href="/site/site_validate.
asp">Valid
ate XHTML</a></td></tr>
<tr><td><a href="/site/site_validate.
asp">Valid
ate CSS</a></td></tr>
<tr><td><a href="/site/site_validate.
asp">Valid
ate XML</a></td></tr>
<tr><td><a href="/site/site_validate.
asp">Valid
ate WML</a></td></tr>
</table>
</div>
</body>
</html>
==========================
==========
==========
==
Start Free Trial
