<style>
.menulines{
border:1px solid white;
}
.menulines a{
text-decoration:none;
color:black;
}
</style>
<script language="JavaScript1.2">
/*
Highlight menu effect script: By Dynamicdrive.com
For full source, Terms of service, and 100s DTHML scripts
Visit http://www.dynamicdrive.com
*/
function borderize(what,color){
what.style.borderColor=color
}
function borderize_on(e){
if (document.all)
source3=event.srcElement
else if (document.getElementById)
source3=e.target
if (source3.className=="menulines"){
borderize(source3,"black")
}
else{
while(source3.tagName!="TABLE"){
source3=document.getElementById? source3.parentNode : source3.parentElement
if (source3.className=="menulines")
borderize(source3,"black")
}
}
}
function borderize_off(e){
if (document.all)
source4=event.srcElement
else if (document.getElementById)
source4=e.target
if (source4.className=="menulines")
borderize(source4,"white")
else{
while(source4.tagName!="TABLE"){
source4=document.getElementById? source4.parentNode : source4.parentElement
if (source4.className=="menulines")
borderize(source4,"white")
}
}
}
</script><table border="0" width="200"
cellspacing="0" cellpadding="0"
onMouseover="borderize_on(event)"
onMouseout="borderize_off(event)">
<tr><td width="100%" bgcolor="#E6E6E6"><font
face="Arial" size="3"><b>Main
Menu</b></font></td></tr>
<tr><td width="100%" class="menulines"><font
face="Arial" size="2"><a
href="http://wsabstract.com">Website
Abstraction</a></font></td></tr>
<tr><td width="100%" class="menulines"><font
face="Arial" size="2"><a
href="http://freewarejava.com">Freewarejava.com</a>
</font></td></tr>
<tr><td width="100%" class="menulines"><font
face="Arial" size="2"><a
href="http://wsabstract.com/cgi-bin/Ultimate.cgi">Webmaster Help
Forum</a> </font></td></tr>
<tr><td width="100%" class="menulines"><font
face="Arial" size="2"><a
href="http://www.webreview.com">Web
Review</a></font></td></tr>
<tr><td width="100%" class="menulines"><font
face="Arial" size="2"><a
href="http://www.builder.com">Builder.com</a>
</font></td></tr>
</table>
Configuring the menu
The code of Step 2 illustrates what must be done to a
standard table to have the effect applied to its cells. Firstly, have present the
onMouseover=... and onMouseout=...code inside the <table> tag itself, as follows:
<table onMouseover="borderize_on(event)"
onMouseout="borderize_off(event)">
Secondly and finally, for each of the table cells
(<td>) that you wish the effect to be added to, add the class=... code inside it:
<td class="menulines">.......</a>
Viola! |
