Hi,

I have a script which has main elements to it such as A, B, C etc. When you click on a main element it will show a sub-menu of that element. e.g. the menu looks like:

A
B
C
If you clicked on A it would look like:
A
aa
ab
ac

B
C
The main elements are represented by 1 of 2 images. The 2 images are exactly the same except for their colour, one being green (the normal state) and the other being blue (the mouseover and selected state).

The state changes work fine except for one - The mouseover (turn the image from green to blue) and mouseout (turn the image back from blue to green) work, but when a main element is expanded I'd like it to remain blue then aswell (it returns back to green at present as soon as it has been clicked).

My Javascript code is here:

Code:
<script language="JavaScript">


function imgover(imgName, imgOver)
{
	document.images[imgName].src=imgOver;
}


function imgout(imgName, imgOut)
{
	document.images[imgName].src=imgOut;
}


//here you place the ids of every element you want.
var ids=new Array('a1','a2','a3','a4');

function switchid(id){
	hideallids();
	showdiv(id);
}

function hideallids(){
	//loop through the array and hide each element by id
	for (var i=0;i<ids.length;i++){
		hidediv(ids[i]);
	}
}

function hidediv(id) {
	//safe function to hide an element with a specified id
	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'none';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'none';
		}
		else { // IE 4
			document.all.id.style.display = 'none';
		}
	}
}

function showdiv(id) {
	//safe function to show an element with a specified id

	if (document.getElementById) { // DOM3 = IE5, NS6
		document.getElementById(id).style.display = 'block';
	}
	else {
		if (document.layers) { // Netscape 4
			document.id.display = 'block';
		}
		else { // IE 4
			document.all.id.style.display = 'block';
		}
	}
}
</script>

Here is my corresponding HTML:
Code:
 <p><a href="javascript:switchid('a1');" onmouseover="imgover('homeimg', 'home_over.png');return false;" onmouseout="imgout('homeimg', 'home.png');return false;"><img src="home.png" id="homeimg"></a><br />

  	<div id='a1' style="display:none;">
 			<p>link1</p>
 	</div>

 <a href="javascript:switchid('a2');"onmouseover="imgover('productsimg', 'products_over.png');return false;" onmouseout="imgout('productsimg', 'products.png');return false;"><img src="products.png" id="productsimg"></a><br />

  	<div id='a2' style="display:none;">
 			<p>more links</p>

 	</div>

 <a href="javascript:switchid('a3');"onmouseover="imgover('retailimg', 'retail_over.png');return false;" onmouseout="imgout('retailimg', 'retail.png');return false;"><img src="retail.png" id="retailimg"></a><br />

  	<div id='a3' style="display:none;">
 			<p>bfgfgf</p>
 	</div>

 <a href="javascript:switchid('a4');"onmouseover="imgover('commercialimg', 'commercial_over.png');return false;" onmouseout="imgout('commercialimg', 'commercial.png');return false;"><img src="commercial.png" id="commercialimg"></a><br />

 	<div id='a4' style="display:none;">
 			<p>Sartre is</p>
	</div>

I have the code uploaded to a public webpage which is found at:

http://www.meyersdesign.co.uk/dunc/s...menu/test.html

This is my *main* problem I'd like to solve.

========================
This is not essential but if anyone could solve this then I'd also be extremely grateful:
========================

My menu when expanded will not shrink if you click the same element again.

E.g.

A
B
C

I click A:

A
aa
ab
ac
B
C

However if I click A again it stays the same instead of making the sub menu shrink again. However the menu must retain the function that when one item is clicked in the menu any previous items that are expanded shrink.

Here is the functionality im talking about:
http://www.meyersdesign.co.uk/dunc/s...enu/index.html

But please ignore the way that it lets you have more then 1 main item expanded at once as this is NOT what I want.

The source code for this is here:

Code:
function nav(id)
{
    if (document.all){

	if(document.all[id].style.display == 'none'){

	document.all[id].style.display = '';

	} else {

	document.all[id].style.display = 'none';

	}

	return false;

	} else if (document.getElementById){

	if(document.getElementById(id).style.display == 'none'){

	document.getElementById(id).style.display = 'block';

	} else {

	document.getElementById(id).style.display = 'none';

	}

	return false;

	}

}


function imgover(imgName, imgOver)
{
	document.images[imgName].src=imgOver;
}


function imgout(imgName, imgOut)
{
	document.images[imgName].src=imgOut;
}

function imgclick(imgLinks)
{
	nav(imgLinks);
}
The HTML code is here:

Code:
		<tr>
		<td><a href="#" onmouseover="imgover('homeimg', 'home_over.png');return false;" onmouseout="imgout('homeimg', 'home.png');return false;" onclick="imgclick('homelinks'); return false;"><img src="home.png" border="0" name="homeimg"></a></td>
		</tr>
		<tr>
		<td><p id="homelinks" class="menu" style="display: none">&nbsp;&nbsp;<img src="arrow.jpg" border="0">&nbsp;<a href="#"><font size=2 face="verdana" color="#FEFEFE">Link1</font></a><br>&nbsp;&nbsp;<img src="arrow.jpg" border="0">&nbsp;<a href="#"><font size=2 face="verdana" color="#FEFEFE">Link2</font></a><br>&nbsp;&nbsp;<img src="arrow.jpg" border="0"><br></td>
		</tr>
*Please ignore the fact its in a table*
Anyone who can help with either problems I will be extremely gratefull too.

Duncan