473,320 Members | 1,978 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,320 software developers and data experts.

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];}
}
//-->
</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
5 4070
gits
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
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
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
acoder
16,027 Expert Mod 8TB
Threads merged. Please do not double post your question. Thanks.

Moderator.
Aug 19 '08 #6

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

Similar topics

4
by: erikd | last post by:
I'm using an expanding tree menu based on the design from Dieter Bungers GMD (www.gmd.de) and infovation (www.infovation.de) named displayToc.js. The problem is that the script isn't working...
4
by: Miguel Dias Moura | last post by:
Hello, I created a datalist in an ASP.Net / VB page. I display the image and price of a few products. When a user clicks an image I want to load the page "detail.aspx?number=id" and send the...
14
by: Bryan | last post by:
I am attempting to make a web page more Netscape friendly... <a href="http:www.gordonceilings.com"></a> I have already corrected the table issues in an offline staging site (where I do the...
4
by: Enrika | last post by:
Greetings! I'm working on a CSS drop-down menu, which, to my surprise, is actually working, more-or-less, in both IE *and* Firefox (and Netscape). But there are two changes that I want to make that...
5
by: Jonathan | last post by:
Hello All, I am in the process of creating a 2/3 level collapsible/exspanible menu (called "nav") where users can click on a category and have the submenus appear beneath it and so on (allow...
2
by: az538 | last post by:
Hello All, I am having a problem with my menu and submenu system. It works like a champ in IE6 and Firefox but IE7 renders the submenus in incorrect positions on the page. Also, the menu system...
1
omerbutt
by: omerbutt | last post by:
hi every one i have a menu li and ul based the problem is when any specific category in the li is hovered the li or the sub-cat items appear but as i move my mouse over the sub-cat or level two li it...
2
by: dharmbhav | last post by:
Hello all, I am trying to develop a roll-over menu effect on a page. It works fine with all other browsers except IE6. Can some one please help me? HTML: <div class="menu-item-wrap">...
0
by: ryjfgjl | last post by:
ExcelToDatabase: batch import excel into database automatically...
1
isladogs
by: isladogs | last post by:
The next Access Europe meeting will be on Wednesday 6 Mar 2024 starting at 18:00 UK time (6PM UTC) and finishing at about 19:15 (7.15PM). In this month's session, we are pleased to welcome back...
0
by: Vimpel783 | last post by:
Hello! Guys, I found this code on the Internet, but I need to modify it a little. It works well, the problem is this: Data is sent from only one cell, in this case B5, but it is necessary that data...
0
by: ArrayDB | last post by:
The error message I've encountered is; ERROR:root:Error generating model response: exception: access violation writing 0x0000000000005140, which seems to be indicative of an access violation...
1
by: PapaRatzi | last post by:
Hello, I am teaching myself MS Access forms design and Visual Basic. I've created a table to capture a list of Top 30 singles and forms to capture new entries. The final step is a form (unbound)...
1
by: CloudSolutions | last post by:
Introduction: For many beginners and individual users, requiring a credit card and email registration may pose a barrier when starting to use cloud servers. However, some cloud server providers now...
1
by: Defcon1945 | last post by:
I'm trying to learn Python using Pycharm but import shutil doesn't work
1
by: Shællîpôpï 09 | last post by:
If u are using a keypad phone, how do u turn on JavaScript, to access features like WhatsApp, Facebook, Instagram....
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.