I apologize if this post is in the wrong forum, but I don't know exactly what is wrong yet, so I will start here.

I am trying to create a template in Dreamweaver. Because the left navigation bar (which is an uneditable region in the template) contains quite a few links, I've consolidated related links and am using a javascript collapsible menu. My problem is that the images defined in my .js file don't seem to work when I go beyond a certain subfolder in my directory. I am not sure if it is because of the relationship with the template, or what.

My directory structure:

Template located in: TDLWeb/templates/TDLTemp.dwt
JS file located in: TDLWeb/tdl.js
Images located in: TDLWeb/graphics
HTM page #1 located in: TDLWeb/home.tdl/tadil1.htm
HTM page #2 located in: TDLWeb/home.tdl/home.ccb/ccb1.htm

The images all work fine in tadil1.htm (HTM page #1), but when I apply the template to ccb1.htm (HTM page #2), the initial image works (Dreamweaver updates the links on the page), but the images that are toggled as a result of function Toggle(item) are broken. When I click on the image, it should expand the hidden div menu as well as toggle the images. Both pages expand/collapse the menu just fine, but the image problem is driving me crazy.

I hope I explained this well enough and would appreciate any help. I can elaborate further if this is confusing.

Here is the javascript code I'm working with in my .js file:

function Toggle(item) {
obj=document.getElementById(item);
visible=(obj.style.display!="none")
key=document.getElementById("x" + item);
if (visible) {
obj.style.display="none";
key.innerHTML="<img src='../graphics/arrowopen.gif' border='0'>";
} else {
obj.style.display="block";
key.innerHTML="<img src='../graphics/arrowclose.gif' border='0'>";
}
}

function Expand() {
divs=document.getElementsByTagName("SPAN");
for (i=0;i<divs.length;i++) {
divs[i].style.display="block";
key=document.getElementById("x" + divs[i].id);
key.innerHTML="<img src='../graphics/arrowclose.gif' border='0'>";
}
}

function Collapse() {
divs=document.getElementsByTagName("SPAN");
for (i=0;i<divs.length;i++) {
divs[i].style.display="none";
key=document.getElementById("x" + divs[i].id);
key.innerHTML="<img src='../graphics/arrowopen.gif' border='0'>";
}
}



And the part of my template calling the function:
<table width="698" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" CLASS="LeftNavigation"><a id="xmenu1" href="javascript:Toggle1('menu1')"><img src="../graphics/arrowopen.gif" border="0"></a><a class="menulink" href="javascript:Toggle1('menu1')">JMSWG Groups</a>
</td>
</tr>
<tr>
<td colspan="2">
<DIV id="menu1" style="display:none;">
<table width="100%" border="0" cellpadding="2">
<tr>
<td width="3%">&nbsp;</td>
<td width="3%"><font color="#FFCC33"></font>
</td>
<td width="97%" class="LeftNavigation"><a class="leftnavlink" href="../home.tdl/home.jms/imsg.jms/imsg1.htm">IMSG</a></td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td width="3%"><font color="#FFCC33"></font></td>
<td width="97%" class="LeftNavigation"><a class="leftnavlink" href="../home.tdl/home.jms/mdasg.jms/mdasg1.htm">MDASG</a></td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td width="3%"><font color="#FFCC33"></font></td>
<td width="97%" class="LeftNavigation"><a class="leftnavlink" href="../home.tdl/home.jms/nmsg.jms/nmsg1.htm">NMSG</a></td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td width="3%"><font color="#FFCC33"></font></td>
<td width="94%" class="LeftNavigation"><a class="leftnavlink" href="../home.tdl/home.jms/opsg.jms/opsg1.htm">OPSG</a></td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td width="3%"><font color="#FFCC33"></font></td>
<td width="94%" class="LeftNavigation"><a class="leftnavlink" href="../vmfsg.jms/vmfsg1.htm">VMFSG</a></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td colspan="2" class="LeftNavigation"><a id="xmenu2" href="javascript:Toggle1('menu2')"><img src="../graphics/arrowopen.gif" border="0"></a><a class="menulink" href="javascript:Toggle1('menu2')">NATO Groups</a></td>
</tr>
<tr>
<td colspan="2">
<div id="menu2" style="display:none">
<table width="100%" border="0" cellpadding="2">
<tr>
<td width="3%">&nbsp;</td>
<td width="3%"><font color="#FFCC33"></font></td>
<td width="97%" class="LeftNavigation"><a class="leftnavlink" href="../home.tdl/home.nto/nato1.htm">NATO Groups Home</a> </td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td width="3%"><font color="#FFCC33"></font></td>
<td width="97%" class="LeftNavigation"><a class="leftnavlink" href="../home.tdl/home.nto/home.dlg/dlwg1.htm">DLWG</a></td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td width="3%"><font color="#FFCC33"></font></td>
<td width="97%" class="LeftNavigation"><a class="leftnavlink" href="../home.tdl/home.nto/home.issc/issc1.htm">NATO ISSC</a> </td>
</tr>
<tr>
<td width="3%">&nbsp;</td>
<td width="3%"><font color="#FFCC33"></font></td>
<td width="97%" class="LeftNavigation"><a class="leftnavlink" href="../home.tdl/home.nto/home.nnmsg/n_nmsg1.htm">NATO NMSG</a></td>
</tr>
</table>
</div>
</td>
</tr>
</table>