Link to home
Start Free TrialLog in
Avatar of netsmithcentral
netsmithcentralFlag for United States of America

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
Avatar of Michel Plungjan
Michel Plungjan
Flag of Denmark image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of netsmithcentral

ASKER

possibly but I think some serious customization is required.

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

Open in new window

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
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.
Solved it:

<body onload="MM_preloadImages('../images/MENU_portfolio_hot.jpg','../images/MENU_home_hot.jpg','../images/MENU_services_hot.jpg','../images/MENU_testimonials_hot.jpg','../images/MENU_contact_hot.jpg','../images/sub_MENU_logos_hot.gif','../images/Sub_MENU_brochures_hot.gif','../images/Sub_MENU_letterhead_hot.gif','../images/Sub_MENU_illustration_hot.gif','../images/Sub_MENU_bizcards_hot.gif','../images/sub_MENU_logos.gif');document.getElementById('hold').style.display='none';">
-----
onClick=
"document.getElementById('hold').style.display=(document.getElementById('hold').style.display!='none')?'none':'';return false"  
-----
<!-- TemplateBeginEditable name="SubMenu" -->
<div id="hold">
<div id="col1" align="top"><a href="#" 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></div>
          <div><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SubMenu2','','../images/Sub_MENU_brochures_hot.gif',1)"><img src="images/Sub_MENU_brochures.gif" alt="brochures" name="SubMenu2" width="158" height="29" border="0" id="SubMenu2" /></a></div>
          <div><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SubMenu3','','../images/Sub_MENU_letterhead_hot.gif',1)"><img src="images/Sub_MENU_letterhead.gif" alt="letterhead" name="SubMenu3" width="158" height="29" border="0" id="SubMenu3" /></a></div>
         <div> <a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SubMenu4','','../images/Sub_MENU_illustration_hot.gif',1)"><img src="images/Sub_MENU_illustration.gif" alt="illustration" name="SubMenu4" width="158" height="29" border="0" id="SubMenu4" /></a></div>
         <div><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('SubMenu5','','../images/Sub_MENU_bizcards_hot.gif',1)"><img src="images/Sub_MENU_bizcards.gif" alt="business cards" name="SubMenu5" width="158" height="29" border="0" id="SubMenu5" /></a></div>
</div>
and this is vastly different from

onClick="document.getElementById(...).style.display=(document.getElementById(...).style.display=='none')?'block':'none'; return false"

???
I'm happy to award partial credit for the partial solution mplungjan provided (250)