Switch Menu question
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:
I currently don't have anything on the net to look at yet. I would like to get this rollover problem resolved.Code:<title>Untitled Document</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> <style type="text/css"> .menutitle{ cursor:pointer; margin-bottom: 0px; width: 150px; /*background-color:#ECECFF; color:#000000; width:140px; padding:2px; text-align:center; font-weight:bold; /*border:1px solid #000000;/* */ } .submenu{ 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; } </style> <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') document.write('</style>\n') } function SwitchMenu(obj){ if(document.getElementById){ 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"; }else{ 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];} } //--> </script> </head> <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> </span>
Thanks for the great menu code!!!!
-Jason
CSS Codes
Reply With Quote
Bookmarks