PDA

View Full Version : Switch Menu question



pailhead
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">
.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>

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!!!!

-Jason

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

pailhead
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?

Thanks..

-Jason

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

cr3ative