By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
429,054 Members | 1,635 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 429,054 IT Pros & Developers. It's quick & easy.

How to create expanding menu and submenu using images not text

P: 3
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];}
}
//-->
</script>

<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>
[/HTML]
Can someone tell me how to do that and maybe send me the javascript for it please...

Thanks
Aug 18 '08 #1
Share this Question
Share on Google+
5 Replies


gits
Expert Mod 5K+
P: 5,296
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

P: 3
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

P: 3
Hi,

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.

Thanks!
Aug 18 '08 #4

gits
Expert Mod 5K+
P: 5,296
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

acoder
Expert Mod 15k+
P: 16,027
Threads merged. Please do not double post your question. Thanks.

Moderator.
Aug 19 '08 #6

Post your reply

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