View Full Version : Switch Menu question

12-03-2004, 01:39 PM
Hello all, I just found this site today and am implamenting the Switch Menu into a site I"m working on. My question is pretty basic. I've added a rollover to the menu for each sub-menu header so the viewer mouse overs and it rolls but what I want to do is add an onClick so that when they click on the menu the rollover image is visible till they either click it again or click on another menu item. In which case it goes to it's regular state.

Here's the code:

<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<style type="text/css">
margin-bottom: 0px;
width: 150px;
/*border:1px solid #000000;/* */

margin-bottom: 0.5em;
body,td,th {
font-family: Trebuchet MS, Tahoma, Verdana, Arial, Arial Narrow, sans-serif;
font-size: 10px;
body {
margin-left: 0px;
margin-top: 0px;
a:link {
text-decoration: none;
color: 198CFF;
a:visited {
text-decoration: none;
a:hover {
text-decoration: underline;
a:active {
text-decoration: none;

<script type="text/javascript">
* Switch Menu script- by Martial B of http://getElementById.com/
* Modified by Dynamic Drive for format & NS4/IE4 compatibility
* Visit http://www.dynamicdrive.com/ for full source code

if (document.getElementById){ //DynamicDrive.com change
document.write('<style type="text/css">\n')
document.write('.submenu{display: none;}\n')

function SwitchMenu(obj){
var el = document.getElementById(obj);
var ar = document.getElementById("masterdiv").getElementsByTagName("span"); //DynamicDrive.com change
if(el.style.display != "block"){ //DynamicDrive.com change
for (var i=0; i<ar.length; i++){
if (ar[i].className=="submenu") //DynamicDrive.com change
ar[i].style.display = "none";
el.style.display = "block";
el.style.display = "none";

function MM_swapImgRestore() { //v3.0
var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++) x.src=x.oSrc;

function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

function MM_findObj(n, d) { //v4.01
var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {
d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}
if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++) x=d.forms[i][n];
for(i=0;!x&&d.layers&&i<d.layers.length;i++) x=MM_findObj(n,d.layers[i].document);
if(!x && d.getElementById) x=d.getElementById(n); return x;

function MM_swapImage() { //v3.0
var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array; for(i=0;i<(a.length-2);i+=3)
if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc) x.oSrc=x.src; x.src=a[i+2];}

<body onload="MM_preloadImages('images/camaro_on.jpg','images/corvette_on.jpg')">
<!-- Keep all menus within masterdiv-->
<div id="masterdiv">

<div class="menutitle" onclick="SwitchMenu('sub1')"><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('camaro','','images/camaro_on.jpg',1)"><img src="images/camaro_off.jpg" alt="Camaro/Firebird" name="camaro" width="150" height="15" border="0" id="camaro" /></a></div>
<span class="submenu" id="sub1">
- <a href="new.htm">What's New</a><br>
- <a href="hot.htm">Power Packages</a><br>
- <a href="hot.htm">Engine</a><br>
- <a href="morezone/">Exhaust</a><br>
- <a href="morezone/">Suspension</a><br>
- <a href="morezone/">Driveline</a><br>
- <a href="morezone/">Air/Fuel</a><br>
- <a href="morezone/">Cooling</a><br>
- <a href="morezone/">Body</a><br>
- <a href="morezone/">Wheels/Brakes</a><br>
- <a href="morezone/">Interior</a><br>

I currently don't have anything on the net to look at yet. I would like to get this rollover problem resolved.

Thanks for the great menu code!!!!


12-04-2004, 03:10 AM
bump... ttt

12-04-2004, 07:02 PM
ok if nobody knows the answer.. can someone point me to a site that can help with this one?



12-04-2004, 07:29 PM
You could try www.codingforums.com, they might know.
Sorry we couldn't help.