Simply install the script per the instructions on the script page, and then for your anchor links, you'd add:
Code:
class="menuanchorclass" rel="anylinkmenuX"
inside the IMG tag of each of them, where X should be replaced with an integer. The below is the source of your entire page, but with Anylink menu added (additions in red):
Code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1">
<meta http-equiv="Content-Type"
content="text/html; charset=ISO-8859-1">
<title>Mrs. Freshour's 3rd Grade</title>
<style type="text/css">
<!--
body,td,th {
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 12px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background-color: #66FFFF;
background-image: url(images/lk8_bkgnd.gif);
}
-->
</style>
<link rel="stylesheet" type="text/css" href="anylinkmenu.css" />
<script type="text/javascript" src="menucontents.js"></script>
<script type="text/javascript" src="anylinkmenu.js">
/***********************************************
* AnyLink JS Drop Down Menu v2.0- © Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Project Page at http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm for full source code
***********************************************/
</script>
<script type="text/javascript">
//anylinkmenu.init("menu_anchors_class") //Pass in the CSS class of anchor links (that contain a sub menu)
anylinkmenu.init("menuanchorclass")
</script>
</head>
<body link="#000000" vlink="#000000" alink="#000000">
>
<div align="center">
<table width="975" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td>
<table width="975" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td rowspan="2" height="101" width="252"><img
src="images/sitename_1x1.gif" height="101" width="252"></td>
<td height="16" width="470"><img
src="images/sitename_1x2.gif" height="16" width="470"></td>
<td rowspan="2" height="101" width="253"><img
src="images/sitename_1x3.gif" height="101" width="253"></td>
</tr>
<tr>
<td height="85" width="470"><img src="images/sitename.gif"
height="85" width="470"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="975" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="140" width="188"><img src="images/main_2x1.gif"
height="140" width="188"></td>
<td width="154"><img src="images/main_2x2.gif" height="140"
width="154"></td>
<td width="146"><img src="images/main_2x3.gif" height="140"
width="146"></td>
<td width="143"><img src="images/main_2x4.gif" height="140"
width="143"></td>
<td width="144"><img src="images/main_2x5.gif" height="140"
width="144"></td>
<td width="200"><img src="images/main_2x6.gif" height="140"
width="200"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="975" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td><img src="images/main_3x1.gif" height="76" width="52"></td>
<td><a href="index.htm"><img src="images/btn1.gif"
height="76" width="136" border="0" class="menuanchorclass" rel="anylinkmenu1"></a></td>
<td><a href="page2.htm"><img src="images/btn2.gif"
height="76" width="154" border="0" class="menuanchorclass" rel="anylinkmenu2"></a></td>
<td><a href="page3.htm" class="menuanchorclass" rel="anylinkmenu3"><img src="images/btn3.gif"
height="76" width="146" border="0"></a></td>
<td><a href="page4.htm"><img src="images/btn4.gif"
height="76" width="143" border="0" class="menuanchorclass" rel="anylinkmenu4"></a></td>
<td><a href="page5.htm"><img src="images/btn5.gif"
height="76" width="144" border="0"></a></td>
<td> <a target="_blank"
href="http://www.swain.k12.nc.us/education/school/school.php?sectionid=98"><img
src="images/btn6.gif" height="76" width="141" border="0"></a></td>
<td><img src="images/main_3x8.gif" height="76" width="59"></td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="975" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td width="52" background="images/main_4x1.gif"> </td>
<td valign="top" width="864" bgcolor="#ffffff">
<p align="center"> </p>
<p align="center"><b><font face="Verdana" size="6">Welcome
to Mrs. Freshour's 3rd Grade Class!</font></b></p>
<p align="center"><font face="Verdana" size="4">• • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •</font></p>
<p align="center"><font face="Verdana" size="3">Thanks for
visiting our classroom website! This site is designed to be used by
both parents and students of our classroom as a resource tool. It is
primarily a way to keep everyone up-to-date on the homework, projects,
and activities that are taking place throughout the year. There are
also many fun and interesting things to do and see. Use the tabs at the
top of the page to navigate through the various parts of this
website. Roll up your sleeves, and get ready to dig in!
Enjoy!</font></p>
<p align="center"><font face="Verdana" size="4">• • • • • •
• • • • • • • • • • • • • • • • • • • • • • • • • • • • • • • •</font></p>
<p align="center"><b><font face="Verdana" size="4">Announcements<br>
</font></b></p>
<table
style="text-align: left; width: 607px; margin-left: auto; margin-right: auto; height: 100px;"
border="1" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td style="vertical-align: top;">
<div style="text-align: left;">
<div style="text-align: center;"><big><small><small><br>
</small></small>Open House will be Tuesday, August
9th.<br>
<small><small><br>
</small></small>The first day of school is Wednesday, August 10th.<small><small><br>
<br>
</small></small></big></div>
<div style="text-align: center;"><big>The first day
of school will be a half day, and students will dismiss at 11:30 a.m.<small><small><br>
<br>
</small></small></big></div>
</div>
</td>
</tr>
</tbody>
</table>
<p align="center"><br>
</p>
<p align="center"><b><font face="Verdana" size="4"> <small>•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
•
• • • • • • • • • • • • • • • • • • • •</small></font></b></p>
<b> </b>
<p align="center"><b><font face="Verdana" size="4"><b> <a
href="mailto:afreshour@swainmail.org"> <img src="images/email.gif"
height="60" width="60" border="0"></a><br>
<small>Amber Freshour<br>
</small> </b></font><small><font face="Verdana" size="3"><small><b>West
Elementary
School</b><br>
4142 Highway 19 West<br>
Bryson City, NC 28713<br>
828.488.2119</small></font></small></b></p>
<b> </b>
<p><b> </b></p>
<b> </b></td>
<td width="59" background="images/main_4x3.gif"> </td>
</tr>
</tbody>
</table>
</td>
</tr>
<tr>
<td>
<table width="975" border="0" cellpadding="0" cellspacing="0">
<tbody>
<tr>
<td height="76" width="133"><img src="images/main_5x1.gif"
height="76" width="133"></td>
<td height="76" width="639" background="images/main_5x2.gif">
<p align="center"><font face="Verdana">
All
Information</font><font face="Times New Roman"> © </font> <font
face="Verdana">2011 Amber Freshour</font></p>
</td>
<td height="76" width="203"><img src="images/main_5x3.gif"
height="76" width="203"></td>
</tr>
<tr>
<td height="68" width="133"><img src="images/main_6x1.gif"
height="68" width="133"></td>
<td height="68" width="639"><img src="images/main_6x2.gif"
height="68" width="639"></td>
<td height="68" width="203"><a
href="http://www.thistlegirldesigns.com" target="_blank"><img
src="images/main_6x3.gif"
alt="This website template was purchased at ThistleGirl Designs."
height="68" width="203" border="0"></a></td>
</tr>
</tbody>
</table>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
Here I've stopped at the 4 anchor, since inside the default menucontents.js, there are only four drop down menus defined (anylinkmenu1, anylinkmenu2, etc). You should define additional drop down menus inside this .js file first before applying it to additional anchor links on your page.
Drop Down Menu
Reply With Quote
Bookmarks