Dynamic Drive DHTML Scripts- Highlight menu effect

FF1+ IE5+

Highlight menu effect

Author: Dynamic Drive

Description: Add a stylish "highlight" effect to your table menus using this versatile DHTML script. A thin border is applied around the table cell (<td>) in participation as the mouse moves over it, with this effect visible in IE4+ and NS6+. Great and lightweight effect.

Demo:

Main Menu

Directions

Step 1: Insert the following script into the <head> section of your page:

Select All

<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>

Step 2: Add the below to the <body> of your page. It contains the HTML codes for the menu:

Select All
<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:

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:

Viola!

Wordpress Users: Step by Step instructions to add ANY Dynamic Drive script to an entire Wordpress theme or individual Post