netsmithcentral
asked on
onClick load a sub-menu of multiple roll-over images
I would like a sub-menu of roll-over images to ONLY appear/load onClick of one of the Main menu items. The sub-menu items are roll-over images that I want to appear stacked in a <div> on left side of page below the main menu. The roll-over images that make up the sub-menu will link to other pages using <a href .....>
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
you need to change your ID
<div style="display:none">
<a href="portfolio3.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SubMenu1','','../images/sub_MENU_logos_hot.gif',1)"><img src="images/sub_MENU_logos.gif" alt="logos" name="SubMenu1" width="158" height="29" border="0" id="SubMenu1" /></a>
should be
<div style="display:none" id="SubMenu1" >
<a href="portfolio3.asp" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SubMenu1','','../images/sub_MENU_logos_hot.gif',1)"><img src="images/sub_MENU_logos.gif" alt="logos" width="158" height="29" border="0" /></a>
but the div could also be a table row if you want to show a row of images
Then change display:none to visibility:hidden
and change
.display=(....'none')?'block':'none'
to
.visibility=(....'hidden')?'visible':'hidden'
ASKER
Browser gives error
"Could Not Get the Display Property. Invalid Argument. Line 61"
Is there any javascript I need to call out in the head of the document?
I also don't understand the dots you have, (....'hidden') or (....'none')
Thanks,Bryan
"Could Not Get the Display Property. Invalid Argument. Line 61"
Is there any javascript I need to call out in the head of the document?
I also don't understand the dots you have, (....'hidden') or (....'none')
Thanks,Bryan
They mean: replace the display in the code I already gave you with visibility- the none with hidden and the block with visible. The difference is display:none REMOVES the div and visibility:hidden just hides it.
ASKER
Solved it:
<body onload="MM_preloadImages(' ../images/ MENU_portf olio_hot.j pg','../im ages/MENU_ home_hot.j pg','../im ages/MENU_ services_h ot.jpg','. ./images/M ENU_testim onials_hot .jpg','../ images/MEN U_contact_ hot.jpg',' ../images/ sub_MENU_l ogos_hot.g if','../im ages/Sub_M ENU_brochu res_hot.gi f','../ima ges/Sub_ME NU_letterh ead_hot.gi f','../ima ges/Sub_ME NU_illustr ation_hot. gif','../i mages/Sub_ MENU_bizca rds_hot.gi f','../ima ges/sub_ME NU_logos.g if');docum ent.getEle mentById(' hold').sty le.display ='none';">
-----
onClick=
"document.getElementById(' hold').sty le.display =(document .getElemen tById('hol d').style. display!=' none')?'no ne':'';ret urn false"
-----
<!-- TemplateBeginEditable name="SubMenu" -->
<div id="hold">
<div id="col1" align="top"><a href="#" onmouseout="MM_swapImgRest ore()" onmouseover="MM_swapImage( 'SubMenu1' ,'','../im ages/sub_M ENU_logos_ hot.gif',1 )"><img src="images/sub_MENU_logos .gif" alt="logos" name="SubMenu1" width="158" height="29" border="0" id="SubMenu1" /></a></div>
<div><a href="#" onmouseout="MM_swapImgRest ore()" onmouseover="MM_swapImage( 'SubMenu2' ,'','../im ages/Sub_M ENU_brochu res_hot.gi f',1)"><im g src="images/Sub_MENU_broch ures.gif" alt="brochures" name="SubMenu2" width="158" height="29" border="0" id="SubMenu2" /></a></div>
<div><a href="#" onmouseout="MM_swapImgRest ore()" onmouseover="MM_swapImage( 'SubMenu3' ,'','../im ages/Sub_M ENU_letter head_hot.g if',1)"><i mg src="images/Sub_MENU_lette rhead.gif" alt="letterhead" name="SubMenu3" width="158" height="29" border="0" id="SubMenu3" /></a></div>
<div> <a href="#" onmouseout="MM_swapImgRest ore()" onmouseover="MM_swapImage( 'SubMenu4' ,'','../im ages/Sub_M ENU_illust ration_hot .gif',1)"> <img src="images/Sub_MENU_illus tration.gi f" alt="illustration" name="SubMenu4" width="158" height="29" border="0" id="SubMenu4" /></a></div>
<div><a href="#" onmouseout="MM_swapImgRest ore()" onmouseover="MM_swapImage( 'SubMenu5' ,'','../im ages/Sub_M ENU_bizcar ds_hot.gif ',1)"><img src="images/Sub_MENU_bizca rds.gif" alt="business cards" name="SubMenu5" width="158" height="29" border="0" id="SubMenu5" /></a></div>
</div>
<body onload="MM_preloadImages('
-----
onClick=
"document.getElementById('
-----
<!-- TemplateBeginEditable name="SubMenu" -->
<div id="hold">
<div id="col1" align="top"><a href="#" onmouseout="MM_swapImgRest
<div><a href="#" onmouseout="MM_swapImgRest
<div><a href="#" onmouseout="MM_swapImgRest
<div> <a href="#" onmouseout="MM_swapImgRest
<div><a href="#" onmouseout="MM_swapImgRest
</div>
and this is vastly different from
onClick="document.getEleme ntById(... ).style.di splay=(doc ument.getE lementById (...).styl e.display= ='none')?' block':'no ne'; return false"
???
onClick="document.getEleme
???
ASKER
I'm happy to award partial credit for the partial solution mplungjan provided (250)
ASKER
http://www.muledesignillustration.com/test3.html
on the above page, I want the sub menu to appear when the user clicks the "portfolio" but I don't want it to load a page, I want the submenu which will consist of 5 or 6 portfolio types to appear and function as rollover images that will load separate pages. illustrated in the following page:
http://www.muledesignillustration.com/portfolio3.asp