It appears you have not yet registered with DEVPPL. To register please click here... (it's fast, easy and free!)

Forum

Log In Sponsors
Board index Programming JavaScript Forum

Javascript Menu

Javascript Menu

Postby rai on Tue Sep 26, 2006 3:06 am

I need help on my javascript menu. I have a 3 different menu that shows a submenus when their is a mouseover. below my menu, i placed a flash banner. My problem now is when i move my mouse to the menu, the submenu appears to be at the back of the flash banner, i tried to remove the flash banner, and the submenus appears, but when i placed the flash banner the submenus appears at the back of it.

pls need help on my javascript menu

heres the javascript code for the <table> where my menu and flash banner are located:

<TR>
<TD height="30" colspan="6" valign="top"><IMG SRC = "IMAGES/top_left.GIF"><a href="menu.asp?id=1" onMouseOut="MM_swapImgRestore();overdiv=0;setTimeout('hidechargeit()',1000)" onMouseOver="MM_swapImage('Solar','','images/top_chargeit.gif',1);popchargeit(0);overdiv=1;setTimeout('hidechargeit()',900000);return true"><img src="images/top_chargeit_down.GIF" alt="Charge It Products" name="Solar" border="0"></a><a href="menu.asp?id=2" onMouseOut="MM_swapImgRestore();overdiv=0;setTimeout('hideLayer()',1000)" onMouseOver="MM_swapImage('Golf','','images/top_golf.gif',1);popLayer(0);overdiv=1;setTimeout('hideLayer()',900000);return true"><img src="images/top_golf_down.GIF" alt="Golf Products" name="Golf" border="0"></a><a href="menu.asp?id=3" onMouseOut="MM_swapImgRestore();overdiv=0;setTimeout('hideLicense()',1000)" onMouseOver="MM_swapImage('License','','images/top_licensed.gif',1);popLicense(0);overdiv=1;setTimeout('hideLicense()',900000);return true"><img src="images/top_licensed_down.GIF" alt="License" name="License" border="0"></a></TD>
</TR>
<TR>
<TD COLSPAN =6 valign="top"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,29,0" width="800" height="170">
<param name="movie" value="fla/banner.swf">
<param name="quality" value="high">
<embed src="fla/banner.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="800" height="170"></embed>
</object></TD>
</TR>


<!-- ************************ -->
<!-- SECTION ONE BEGINS HERE - CUT AND PASTE TO HEAD SECTION -->
<!-- include style class as well as scripting -->
<style type="text/css">
div.pop {margin-left:auto;margin-right:auto;text-align:center}
span.pop {color:red;font-weight:bold}
table.pop {color:black;
}
tr.pop {border:none}
td.pop {border:none}</style>

<script type="text/javascript"> //<![CDATA[
/* checked with jsLint 2003 09 07 */
descarray=new Array(
/*
of quoted (')popup captions for each active area
Each popup caption except the last ends in a comma to continue the list
The last caption ends in a ); to close the descriptor array
*/

'<a href="products.asp?cat=3" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(\'carts\',\'\',\'images/carts-on.jpg\',1)"><img src="images/carts.jpg" alt="Carts" name="carts" border="0"></a><br><a href="products.asp?cat=4" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(\'bags\',\'\',\'images/bag2-on.jpg\',1)"><img src="images/bag2.jpg" alt="Bags" name="bags" border="0"></a>');

licensearray=new Array(
'<a href="products.asp?cat=5" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(\'key\',\'\',\'images/keyring-on.jpg\',1)"><img src="images/keyring.jpg" alt="Key Rings" name="key" border="0"></a><br><a href="products.asp?cat=6" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(\'Stat\',\'\',\'images/stationary-on.jpg\',1)"><img src="images/stationary.jpg" alt="Stationary/Accessories" name="stat" border="0"></a><br><a href="products.asp?cat=7" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(\'jewelry\',\'\',\'images/jewelry-on.jpg\',1)"><img src="images/jewelry.jpg" alt="Jewelry" name="jewelry" border="0"></a>');


chargeitarray=new Array(
'<a href="products.asp?cat=1" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(\'bag\',\'\',\'images/chargeitbags-on.jpg\',1)"><img src="images/chargeitbags.jpg" alt="Charge It Bags" name="bag" border="0"></a><br><a href="products.asp?cat=2" onMouseOut="MM_swapImgRestore()" onMouseOver="MM_swapImage(\'accessories\',\'\',\'images/accessories-on.jpg\',1)"><img src="images/accessories.jpg" alt="Charge It Accessories" name="accessories" border="0"></a>');

overdiv="0";xMouse=0;yMouse=0;MSIE=document.all //prepare for IE kludge
if (!MSIE) {document.captureEvents(Event.MouseMove);}
//document.onmousemove=getMouse; // initiate event handler



function popchargeit(a){
if(!chargeitarray[a]) {
chargeitarray[a]='<span class="pop">This popup (#'+a+') needs description text!<\/span>';
}
desc="<table class='pop' summary='*'>\n<tr class='pop'><td class='DropDownTxt'>\n";
desc+=chargeitarray[a]+"<\/td><\/tr><\/table>";
document.getElementById("object1").innerHTML=desc;
switch(a){
case 0:
MenuX = ((screen.width-770)/2) + 380;
break;
case 1:
MenuX = ((screen.width-770)/2) + 380;
break;
}
document.getElementById("object1").style.left=MenuX+'px';
document.getElementById("object1").style.top=65+'px';
document.getElementById("object1").style.zorder=100;
document.getElementById("object1").style.pixeltop=1;

}
function hidechargeit(){
if (overdiv == "0") {document.getElementById("object1").style.top="-500px";}
} //]]>



function popLayer(a){
if(!descarray[a]) {
descarray[a]='<span class="pop">This popup (#'+a+') needs description text!<\/span>';
}
desc="<table class='pop' summary='*'>\n<tr class='pop'><td class='DropDownTxt'>\n";
desc+=descarray[a]+"<\/td><\/tr><\/table>";
document.getElementById("object1").innerHTML=desc;
switch(a){
case 0:
MenuX = ((screen.width-770)/2) + 500;
break;
case 1:
MenuX = ((screen.width-770)/2) + 500;
break;
}
document.getElementById("object1").style.left=MenuX+'px';
document.getElementById("object1").style.top=65+'px';

}
function hideLayer(){
if (overdiv == "0") {document.getElementById("object1").style.top="-500px";}
} //]]>







function popLicense(a){
if(!licensearray[a]) {
licensearray[a]='<span class="pop">This popup (#'+a+') needs description text!<\/span>';
}
desc="<table class='pop' summary='*'>\n<tr class='pop'><td class='DropDownTxt'>\n";
desc+=licensearray[a]+"<\/td><\/tr><\/table>";
document.getElementById("object1").innerHTML=desc;
switch(a){
case 0:
MenuX = ((screen.width-770)/2) + 630;
break;
case 1:
MenuX = ((screen.width-770)/2) + 630;
break;
}
document.getElementById("object1").style.left=MenuX+'px';
document.getElementById("object1").style.top=65+'px';

}
function hideLicense(){
if (overdiv == "0") {document.getElementById("object1").style.top="-500px";}
} //]]>




</script>
<!-- SECTION ONE ENDS HERE - CUT AND PASTE TO HEAD SECTION -->

Thank you so much and God Bless
rai
 
Posts: 0
Joined: Tue Sep 26, 2006 2:59 am

Postby mwa103 on Tue Sep 26, 2006 6:08 pm

I know from using a css menu that there is a z-index option which (I think) allows you to place items ahead of other items on the screen. I would try adding:

Code: Select all
document.getElementById("object1").style.z-index=500;


to the end of your "popchargeit(a)" function (with all the other "getElementById" lines). If 500 doesn't work, try a larger number. I think that would be the right place to put it, I'm not the best at reading javascript code. I'm sure if I'm wrong someone will correct me.

Hope this helps.
-Mike

**Edit: Just took another look at the code and noticed that you have a document.getElementById("object1").style.zorder=100, I think that does the same as the z-index, but not sure. You might try increasing the 100 to a larger value.**
mwa103
100+ Club
 
Posts: 206
Joined: Mon Mar 07, 2005 10:55 pm


Who is online

Users browsing this forum: No registered users and 11 guests