Menu
I have a roll over image button that changes the css div display property from none to block depending on which button is pressed. I cant seem to be able to find a way to leave the button to stay on the on-state while it is active. When I say active I mean the corresponding content is displayed (Div tag set to display=’block’.
Heres the code. Any help or hints greatly appreciated. TY
[CODE]<html>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=iso-8859-1″>
<script language=”JavaScript” type=”text/JavaScript”>
<!–
var qnumber=getQueryVariable(“qnumber”);
function getQueryVariable(variable) {
var query = window.location.search.substring(1);
var vars = query.split(“&”);
for (var i=0;i<vars.length;i++) {
var pair = vars[i].split(“=”);
if (pair[0] == variable) {
return pair[1];
}
}
}
function getQnumber(qnumber)
{
if (qnumber == null)
{
alert(“here”)
document.surveyform.qnumber.value = 1;
qnumber=1;
}
eval(“document.getElementById(‘menu” + qnumber + “‘).style.display=’block'”);
}
function e1_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];}
}
function showit(qnumber)
{
prev = document.surveyform.prev.value;
org = 1;
if (prev != qnumber)
{
eval(“document.getElementById(‘menu” + prev + “‘).style.display=’none'”);
eval(“document.getElementById(‘menu” + org + “‘).style.display=’none'”);
eval(“document.getElementById(‘menu” + qnumber + “‘).style.display=’block'”);
document.surveyform.prev.value = qnumber;
}
else {return;}
}
function changeOn(button)
{
document.images[button].src= “images/nav/resources/greenbusiness_on.gif”;
return true;
}
</script>
</head>
<body onLoad=”MM_preloadImages(‘images/nav/resources/solarenergy_on.gif’,’images/nav/resources/generalrenewableenergy_on.gif’,’images/nav/resources/greenbusiness.gif’)”>
<FORM name=surveyform action=resources_slim.html method=get><INPUT type=hidden value=1 name=qnumber> <INPUT type=hidden value=1 name=prev>
<table width=”741″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>
<table width=”741″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td valign=”top” width=”109″></td>
<td width=”30″ rowspan=”2″><img src=”images/spacer.gif” width=”30″ height=”1″></td>
<td width=”402″ rowspan=”2″ valign=”top”>
<DIV id=menu1 style=”display: block”><table width=”402″ border=”0″ cellspacing=”0″ cellpadding=”0″><tr><td><p>blah blah blah</p></td></tr></table></div>
<DIV id=menu2 style=”display: none”><table width=”402″ border=”0″ cellspacing=”0″ cellpadding=”0″><tr><td><p class=”title”>GREEN BUSINESS AFFINITY GROUPS</p></td></tr></table></div>
<DIV id=menu3 style=”display: none”><table width=”402″ border=”0″ cellspacing=”0″ cellpadding=”0″><tr><td><p class=”title”>GENERAL RENEWABLE ENERGY AFFINITY GROUPS </p></td></tr></table></div>
<DIV id=menu4 style=”display: none”><table width=”402″ border=”0″ cellspacing=”0″ cellpadding=”0″><tr><td><p class=”title”>Solar Energy AFFINITY GROUPS </p></td></tr></table></div>
</td>
<td width=”30″ rowspan=”2″> </td>
<td width=”170″ rowspan=”2″ valign=”top”>
<table width=”170″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr>
<td>
<table width=”170″ border=”0″ cellspacing=”0″ cellpadding=”0″>
<tr><td><a href=”javascript:showit(2)” onMouseOut=”e1_swapImgRestore(2)” onMouseOver=”MM_swapImage(‘button2′,”,’http://www.bpmforum.org/GREEN/images/nav/resources/greenbusiness_on.gif’,1)” ><img src=”http://www.bpmforum.org/GREEN/images/nav/resources/greenbusiness.gif” name=”button2″ width=”157″ height=”19″ border=”0″ id=”button2″></a></td></tr>
<tr><td><a href=”javascript:showit(3)” onMouseOut=”e1_swapImgRestore(3)” onMouseOver=”MM_swapImage(‘button3′,”,’http://www.bpmforum.org/GREEN/images/nav/resources/generalrenewableenergy_on.gif’,1)”><img src=”http://www.bpmforum.org/GREEN/images/nav/resources/generalrenewableenergy.gif” name=”button3″ width=”157″ height=”19″ border=”0″ id=”button3″></a></td></tr>
<tr><td><a href=”javascript:showit(4)” onMouseOut=”e1_swapImgRestore(4)” onMouseOver=”MM_swapImage(‘button4′,”,’http://www.bpmforum.org/GREEN/images/nav/resources/solarenergy_on.gif’,1)”><img src=”http://www.bpmforum.org/GREEN/images/nav/resources/solarenergy.gif” name=”button4″ width=”157″ height=”19″ border=”0″ id=”button4″></a></td></tr>
</table>
</td>
</tr>
</table>
<img src=”images/spacer.gif” width=”30″ height=”1″> </td>
</tr>
<tr><td valign=”bottom”></td>
</tr>
</table>
</td>
</tr>
<tr>
<td height=”11″></td>
</tr>
</table>
</FORM>
</body>
</html>