I would suggest switching from your current JavaScript method for the menus to a simple DIV swapping method using CSS and a small bit of very simple JavaScript.
I've used this method before, and it's compatible with just about every curent browser, including IE, FireFox, Opera, Netscape and AvantBrowser.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta name="generator"
content="HTML Tidy for Linux/x86 (vers 1st March 2002), see www.w3.org" />
<meta http-equiv="content-type"
content="text/html; charset=ISO-8859-1" />
<title>show/hide div</title>
<style type="text/css">
/*<![CDATA[*/
h1, h2 {
text-align: center;
}
img {
float: left;
clear: left;
margin-right: 1em;
margin-bottom: 2px;
width:70px;
height: 50px;
border: 3px red outset;
background-color: silver;
}
img:hover {
cursor: pointer;
}
img:active {
border: 3px red inset;
}
#div1 {
padding: 5px 15px;
background-color: #f99;
}
#div2 {
padding: 5px 15px;
background-color: #9f9;
}
#div3 {
padding: 5px 15px;
background-color: #99f;
}
/*]]>*/
</style>
<script type="text/javascript">
//<![CDATA[
function change(which) {
document.getElementById('div1').style.display = 'none';
document.getElementById('div2').style.display = 'none';
document.getElementById('div3').style.display = 'none';
document.getElementById(which).style.display = 'block';
}
function showall() {
document.getElementById('div1').style.display = 'block';
document.getElementById('div2').style.display = 'block';
document.getElementById('div3').style.display = 'block';
}
//]]>
</script>
</head>
<body>
<h1>Switch Divs</h1>
<div>
<img src="some.jpg" alt="Toggle Div 1"
onclick="change('div1');" /> <img src="some.jpg"
alt="Toggle Div 2" onclick="change('div2');" /> <img
src="some.jpg" alt="Toggle Div 3"
onclick="change('div3');" /><img src="some.jpg" alt="Toggle All"
onclick="showall();" />
<div id="div1" style="display: block;">
<h2>Watch Here for Coming Attractions</h2>
</div>
<div id="div2" style="display: none;">
<h2>Division 2</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus suscipit velit eu sapien. Curabitur non dui. Praesent
wisi dolor, tincidunt id, iaculis sed, sollicitudin eget, quam.
Quisque feugiat, nulla elementum interdum fermentum, ante
mauris venenatis purus, nec egestas quam risus nec lectus.
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Fusce non elit. In non eros ac
wisi condimentum interdum. Sed ac pede. Duis in enim. Maecenas
porttitor mi faucibus enim. Duis luctus.</p>
<p>Praesent id justo. Pellentesque habitant morbi tristique
senectus et netus et malesuada fames ac turpis egestas. Cras
sagittis metus eu tortor. Nullam leo metus, scelerisque quis,
semper ut, rhoncus ac, ligula. Proin congue nunc at lacus.
Vivamus velit nisl, volutpat ut, dictum sit amet, tempor id,
est. Phasellus feugiat purus eu mauris. Vestibulum non wisi.
Quisque felis urna, vestibulum quis, eleifend placerat,
pulvinar et, eros. Vivamus nonummy hendrerit massa. Mauris
urna. Etiam tempor, tortor et mattis condimentum, risus felis
cursus nulla, nec blandit mauris metus eget purus. Morbi
vehicula, ligula eget rutrum dapibus, libero magna tristique
tortor, ut convallis ante nibh ac turpis. In adipiscing nulla
et quam. Nulla blandit quam at libero. Sed tortor nibh, viverra
ut, lobortis a, ultricies vitae, lorem. Duis faucibus. Cras sed
ligula ac lacus imperdiet cursus. Lorem ipsum dolor sit amet,
consectetuer adipiscing elit.</p>
</div>
<div id="div3" style="display: none;">
<h2>Division 3</h2>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
Vivamus suscipit velit eu sapien. Curabitur non dui. Praesent
wisi dolor, tincidunt id, iaculis sed, sollicitudin eget, quam.
Quisque feugiat, nulla elementum interdum fermentum, ante
mauris venenatis purus, nec egestas quam risus nec lectus.
Class aptent taciti sociosqu ad litora torquent per conubia
nostra, per inceptos hymenaeos. Fusce non elit. In non eros ac
wisi condimentum interdum. Sed ac pede. Duis in enim. Maecenas
porttitor mi faucibus enim. Duis luctus.</p>
</div>
</div>
</body>
</html>
This would solve a lot of headaches for you.
Author
Logged
I hope it gets done soon!
.
