470,571 Members | 2,814 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 470,571 developers. It's quick & easy.

How to create expanding menu and submenu using images not text

I need some help.

I have javasript that creates the submenu but it works if I have a text with css. I need it to do the same with a roll over images. so when I click on the image the submenu (images) shows with roll overs as well.

That's what I have...
[HTML]<script type="text/JavaScript">
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];}

<body onload="MM_preloadImages('images/home_mo.jpg','images/aboutus_mo.jpg','images/contactus_mo.jpg','images/icmember_mo.jpg','images/joinnow_mo.jpg','images/invite_mo.jpg','images/icspomsorship_mo.jpg','images/iccalender_mo.jpg','images/member_mo.jpg','images/intelligent_mo.jpg','images/intelligent_comm_mo.jpg','images/intelligent_community_mo.jpg','images/myprofile_mo.jpg')">

and this for the images
<a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image2','','images/home_mo.jpg',1)"><img src="images/home.jpg" name="Image2" width="104" height="28" border="0" id="Image2" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image3','','images/aboutus_mo.jpg',1)"><img src="images/aboutus.jpg" name="Image3" width="98" height="28" border="0" id="Image3" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image4','','images/contactus_mo.jpg',1)"><img src="images/contactus.jpg" name="Image4" width="98" height="28" border="0" id="Image4" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image5','','images/icmember_mo.jpg',1)"><img src="images/icmember.jpg" name="Image5" width="156" height="28" border="0" id="Image5" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image6','','images/joinnow_mo.jpg',1)"><img src="images/joinnow.jpg" name="Image6" width="93" height="28" border="0" id="Image6" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image7','','images/invite_mo.jpg',1)"><img src="images/invite.jpg" name="Image7" width="186" height="28" border="0" id="Image7" /></a><a href="#" onmouseout="MM_swapImgRestore()" onmouseover="MM_swapImage('Image8','','images/icspomsorship_mo.jpg',1)"><img src="images/icsponsorship.jpg" name="Image8" width="225" height="28" border="0" id="Image8" /></a>
Can someone tell me how to do that and maybe send me the javascript for it please...

Aug 18 '08 #1
5 3861
5,390 Expert Mod 4TB
you just show MM Dreamweaver Code ... which is a commercial application ... what do you really want to have? explain your requirement in more detail in case you need your 'own' script ... otherwise just use your dreamweaver and a tutorial to generate it with that application ... for most people its just a pain to work with dreamweaver code since often not all used code is pasted here ... its even inefficient in most cases ... since it is more a layout then a programming tool ... but that's just my personal opinion :)

kind regards
Aug 18 '08 #2
Basically what I want to do is the following..

1) Have a roll-over images as the main menu
2) upon clicking one of those images a submenu will show up underneath that image
3) the submenu is a roll-over images

That's all in plain simple...

The scripts that I have is being created by ImageReady application and I don't really want to use that.

Can someone please help me.
Aug 18 '08 #3

I have 7 main roll-over images that I need to create an expandable submenus using roll-over images as well.

So when a user clicks on one image a submenu appears beneath it with roll-over images as well.

Can someone please help me with a scripts to do that.

Aug 18 '08 #4
5,390 Expert Mod 4TB
what have you done so far? there are some menu-generators out there on the web ... in case you want to do something for yourself then we should start to work at it together ... first show an example of the html you have and that is related to this requirement. may be you have done some javascript-code too?

the rules at this forum state that we don't give just complete solutions ... this is a programming help forum so in case you need help with your! code you are very welcome ... but show some effort to solve the problem first and then we may show you how to go on with it ... ok?

kind regards
Aug 19 '08 #5
16,027 Expert Mod 8TB
Threads merged. Please do not double post your question. Thanks.

Aug 19 '08 #6

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

4 posts views Thread by Miguel Dias Moura | last post: by
4 posts views Thread by Enrika | last post: by
1 post views Thread by omerbutt | last post: by
1 post views Thread by livre | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.