JAVASCRIPT EXAMPLES - Popup Rollover Menu Links

COPY - Insert Between Head Tags: <HEAD></HEAD>

<style type = "text/css">
.hrefmenu {font-family: Arial, Helvetica, sans-serif; font-size: 15px; font-style: normal; font-weight: bold; color: #3399CC; text-decoration: none; visibility: visible;}
a.hrefmenu:hover {color: #FF8800;}
.hrefsubmenu { font: 10px Arial, helvetica, sans-serif; font-weight: bold; color: #000099; text-decoration: none; }
a.hrefsubmenu:hover { color: #000066; text-decoration: underline; }
a.hrefsubmenu:link { color: #000066; text-decoration: none; }
 
.h3 { font: bold 16px Arial, helvetica, sans-serif; color: #993366}
a.h3-link { text-decoration: none; color: #993366; font: bold 14px Arial, Helvetica, sans-serif }
a.h3-link:hover { color:#993366; text-decoration: underline }
a.h3-link:active { color:#993366; text-decoration: underline }
a.h3-link:visited { color:#993366}
a.h3-link:link {color: #000000; text-decoration: none; font: bold 14px Arial, Helvetica, sans-serif }
.plaintext {font: normal 12px Arial, helvetica; color: #000000}
a.plaintext-link{font: normal 12px Arial, helvetica; color: #FF0033}
a.plaintext-link:hover {color:#000000; text-decoration: underline}
a.plaintext-link:active {color:#FF0033; text-decoration: underline}
a.plaintext-link:link {color: #FF0033; text-decoration: none; font: normal 12px Arial, Helvetica, sans-serif }
.boldtext { font: bold 12px Arial, helvetica, sans-serif; color: #CC6699}
a.boldtext-link { text-decoration: none; color: #FF9900; font: bold 12px Arial, Helvetica, sans-serif }
a.boldtext-link:hover{color:#FF9900; text-decoration: underline  }
a.boldtext-link:link {color: #FF9900; text-decoration: none; font: bold 12px Arial, Helvetica, sans-serif }
</style>

<style type = "text/css">
.topmenu1 {position:absolute; width:200px; visibility:visible; z-index:2; padding:2px;left:185px; top:246px;}
.topmenu2 {position:absolute; width:200px; visibility:visible; z-index:2; padding:2px;left:148px; top:270px;}
.topmenu3 {position:absolute; width:200px; visibility:visible; z-index:2; padding:2px;left:120px; top:295px;}
.submenu1 {position: absolute; width:50px; visibility:hidden; z-index:2; padding:2px;left:335px; top:250px;}
.submenu2 {position: absolute; width:50px; visibility:hidden; z-index:2; padding:2px;left:305px; top:275px;}
.submenu3 {position: absolute; width:50px; visibility:hidden; z-index:2; padding:2px;left:230px; top:300px;}
.contentArea1 {position: absolute; width:330px; visibility:hidden; z-index:1; padding:2px; height:300px;left:445px; top:246px}
.contentArea2 {position: absolute; width:330px; visibility:hidden; z-index:1; padding:2px; height:300px;left:445px; top:246px}
.contentArea3 {position: absolute; width:330px; visibility:hidden; z-index:1; padding:2px; height:300px;left:445px; top:246px}
.contentImage1 {position:absolute; width:330px; visibility:hidden; z-index:1; padding:2px;left:120px; top:350px}
.contentImage2 {position:absolute; width:330px; visibility:hidden; z-index:1; padding:2px;left:120px; top:350px}
.contentImage3 {position:absolute; width:330px; visibility:hidden; z-index:1; padding:2px;left:120px; top:350px}
</style>
<script language="javascript">
// Courtesy of SimplytheBest.net - http://simplythebest.net/scripts/

</script>

COPY - Insert Inside Body: <BODY></BODY>

<div id="area_1" class="contentArea1" style="width: 302; height: 176">
<table border="0" width="250" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><a href="http://jdstiles.com/java/popular.html" class="h3-link">Popular Scripts</a><br>
<span class="plaintext">This link will take you to a listing of the most popular 
javascripts on this website. They contain the latest in advanced DHTML and
will help you enhance your website tremendously.</span>
</tr>
</table>
</div>
<div id="area_2" class="contentArea2" style="width: 330; height: 175">
<table border="0" width="250" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" valign="top"><a href="http://jdstiles.com/java/utilities.html" class="h3-link">Security and Utilities</a><br>
<span class="plaintext">Uncle Jim's™ Web Designs offers a vast number of
security and utility scripts that were designed to assist the webmaster in
creating functional and secure areas for their websites with little effort.</span></td>
</tr>
</table>
<br clear="all">
<br>
</div>
<div id="area_3" class="contentArea3" style="width: 330; height: 166">
<table border="0" width="250" cellspacing="0" cellpadding="0">
<tr>
<td width="50%" valign="top"><a href="http://www.jdstiles.com/java/forms.html" class="h3-link">Javascript Forms</a><br>
<span class="plaintext">We have created a large amount of various forms that 
are cross-browser compatable and offer the functionality to help you offer
your visitors the best interactive experience while visiting your website.
</span></td>
</tr>
</table>
</div>


<div id="topmenu_1" class="topmenu1">
<a href="http://jdstiles.com/java/popular.html" class="hrefmenu" onmouseover="showDivs('submenu_',1),showDivs('area_',1),showDivs('image_',1); return false;"><b>Most Popular Scripts</b></a><br></div>
<div id="topmenu_2" class="topmenu2">
<a class="hrefmenu" href="http://www.jdstiles.com/java/utilities.html" onmouseover="showDivs('submenu_',2),showDivs('area_',2),showDivs('image_',2); return false;"><b>Security and Utilities</b></a><br></div>
<div id="topmenu_3" class="topmenu3">
<a href="http://www.jdstiles.com/java/forms.html" class="hrefmenu" onmouseover="showDivs('submenu_',3),showDivs('area_',3),showDivs('image_',3); return false;"><b>Javascript Forms</b></a><br>
</div>


<div id="submenu_1" class="submenu1">
<table border="0" width="80" cellspacing="0" cellpadding="2" bgcolor="#EBECD9">
<tr>
<td>
<a href="http://www.jdstiles.com/java/popular.html" class="hrefsubmenu"><b>Info page</b></a><br>
<a href="http://www.jdstiles.com/java/popular.html" class="hrefsubmenu"><b>Download</b></a><br>
<a href="http://www.jdstiles.com/java/popular.html" class="hrefsubmenu"><b>Online demo</b></a><br>
</td>
</tr>
</table>
</div>
<div id="submenu_2" class="submenu2">
<table border="0" width="80" cellspacing="0" cellpadding="2" bgcolor="#EBECD9">
<tr>
<td>
<a class="hrefsubmenu" href="http://www.jdstiles.com/java/utilities.html"><b>Info page</b></a><br>
<a class="hrefsubmenu" href="http://www.jdstiles.com/java/utilities.html"><b>Download</b></a><br>
<a class="hrefsubmenu" href="http://www.jdstiles.com/java/utilities.html"><b>Online demo</b></a><br>
</td>
</tr>
</table>
</div>
<div id="submenu_3" class="submenu3">
<table border="0" width="80" cellspacing="0" cellpadding="2" bgcolor="#EBECD9">
<tr>
<td>
<a class="hrefsubmenu" href="http://www.jdstiles.com/java/forms.html"><b>Info page</b></a><br>
<a class="hrefsubmenu" href="http://www.jdstiles.com/java/forms.html"><b>Download</b></a><br>
<a class="hrefsubmenu" href="http://www.jdstiles.com/java/forms.html"><b>Online demo</b></a><br>
</td>
</tr>
</table>
</div>


<div id="image_1" class="contentImage1">
<a href="http://www.jdstiles.com/java/popular.html"><img src="http://jdstiles.com/java/images/popular4.gif" border="0" alt="Popular Scripts" width="111" height="29"></a>
</div>
<div id="image_2" class="contentImage2">
<a href="http://www.jdstiles.com/java/utilities.html"><img src="http://jdstiles.com/java/images/utilities4.gif" border="0" alt="Security and Utilities" width="111" height="29"></a>
</div>
<div id="image_3" class="contentImage3">
<a href="http://www.jdstiles.com/java/forms.html"><img src="http://jdstiles.com/java/images/forms4.gif" border="0" alt="Advanced Forms" width="111" height="29"></a>
</div>

<br><br><br><br><br><br><br><br><br><br><br><br>

COPY - Insert into Body Tag: <BODY 'CODE HERE'>

COPY - Additional Instructions

This is how the script works:

There are 4 sections in the HTML document:
1) a contents section
2) a menus section
3) a submenus section
4) an images section

Within each section there is a number of DIVs (in our case 3 DIVs for each section) whose ID is composed by a word and a number (e.g. area_1, area_2, topmenu_1, topmenu_2 etc.). First we defined each DIV within the <STYLE> tags. The 'visibility' property of each one of our DIVs is set to 'hidden'  except for the main menus (we wish to show the top menus all the time).

The Javascript function showDivs(divName,divNumber) works as follows:
The first parameter supplied to the function is divName (the alphabetic part of the DIV we want to show - e.g. 'area_'). The second parameter is divNumber (the number we have assigned to the DIV - e.g. 1). The function then shows the DIV  whose combination of name and number matches with the parameter we supplied while at the same time hiding the other DIVs.

In order to show submenu_1, area_1 and image_1 divs all we have to do is to call the function for each DIV as follows: showDiv('submenu_',1), showDiv('area_',1), showDiv('image_',1).

How to make it work:

For each new menu you wish to add you'll need to:

1) Add a DIV for each of the sections topmenu, submenu, contentArea, contentImage. Please note that you do not necessarily have to add anything inside the DIV (for example, if you just need the menu and the images then add an empty DIV for the contentArea and submenu sections. Give each DIV an id depending on the section (e.g. all DIVs within the topmenu section have the id 'topmenu_' + number).

2) Give each DIV a class identifier (e.g. 'CLASS = topmenu4) and add an entry in the stylesheet section with all the required properties for that class. Remember to set the visibility property of the DIV to 'hidden'.

3) Increment the var divsUsed variable (just below the showDivs function) to the number of menus you are going to show. (For example if you're planning to have 4 menus then set divsUsed = 4.

Example: Adding a new menu and modifying the position of the layers on the page:

Step 1
Add a DIV in each section
Add a DIV in the  section:
<DIV id = 'topmenu_4' class = 'topmenu4'>your menu...</DIV>
Add a DIV in the  section:
<DIV id = 'submenu_4' class = 'submenu4'> your submenu...</DIV>
Add a DIV in the  section:
<DIV id = 'contentArea_4' class= 'contentArea4'>your content area.. </DIV>
Add a DIV in the  section:
<DIV id = 'submenu_4' class = 'submenu4'> your image</DIV>

Step 2
Add the stylesheet entries for each new DIV class within the <STYLE> tags:
(adjust the values in bold to suit your needs)
.topmenu4 {position:absolute; width:200px; visibility:visible; z-index:2; padding:2px;left:100px; top:466px;}
.submenu4 {position: absolute; width:50px; visibility:hidden; z-index:2; padding:2px;left:215px; top:440px;}
.contentArea4 {position: absolute; width:330px; visibility:hidden; z-index:1; padding:2px;height:300px;left:445px; top:341px}
.contentImage4 {position:absolute; width:330px; visibility:hidden; z-index:1; padding:2px;left: 120px; top:450px}

Step 3
Increment the value of the variable divsUsed to 4. Also define the redirect page for older browsers in this section of the script:

} else {location="old_browser.htm";}

Popup & rollover menu script