473,503 Members | 1,677 Online
Bytes | Software Development & Data Engineering Community
+ Post

Home Posts Topics Members FAQ

How to create expanding menu and submenu using images not text

3 New Member
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 4083
gits
5,390 Recognized Expert Moderator Expert
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
remon87
3 New Member
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
remon87
3 New Member
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 Recognized Expert Moderator Expert
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 Recognized Expert Moderator MVP
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
2669
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
4819
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
1902
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
2159
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
5833
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
2194
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
3785
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
4157
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
7202
marktang
by: marktang | last post by:
ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...
0
7278
Oralloy
by: Oralloy | last post by:
Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...
0
7328
jinu1996
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
1
6991
by: Hystou | last post by:
Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...
0
5578
agi2029
by: agi2029 | last post by:
Let's talk about the concept of autonomous AI software engineers and no-code agents. These AIs are designed to manage the entire lifecycle of a software development project—planning, coding, testing,...
1
5013
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 1 May 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 a new...
0
3167
by: TSSRALBI | last post by:
Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...
0
1512
by: 6302768590 | last post by:
Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...
0
380
bsmnconsultancy
by: bsmnconsultancy | last post by:
In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

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.