View Full Version : Javascript Menu Help

08-11-2004, 09:06 PM
Hey, I'm making a menu for my webpage, and it's pretty complex. I would use flash, but I want the menu to hover and scroll with the page, so I'm putting a table into a layer.

Basically, the menu is a circle divided into fourths. What I want to happen is when you mouse over one of the fourths, a menu shows out of it. I've already made all the images needed, I just don't know how I will have to code for it.

I figured that the best way is to create the tables for the menu and the sub menus, but have them non visible at first. Then, on hover, the corresponding menu is set to visible. Then, when you go to another section, the previous sub menu is reset to unvisible, and the current is visible.

I know close to nothing about making scripts from scratch, so if you can help a brutha out :P.

08-11-2004, 09:53 PM
Generally these forums are to help developers with their code. Since you have none, you have 2 options:
-try to learn and put something together and we will gladly give you a hand, or
-post this in the work offers forum with payment expectations, etc.. read the guidelines in that forum.


08-12-2004, 12:27 AM
I was just asking if that was the best way to do it, then I was gonna go out and figure that out.

Most of the tutorials and all have stuff like "Using if expressions!" and don't really offer much advice.

Mainly, I just wanted to streamline my queries.

08-12-2004, 12:56 AM
Sorry if I sounded rude, I guess I skimmed over your post a little too lightly!

That does sound like one way to do it, and it's probably the way that I would do it. Although, someone else may have an alternative CSS method or something..

To make elements visible and invisible, I use the following:

var element = document.getElementById('elementID');
element.style.visibility = 'visible';
element.style.visibility = 'hidden';

You can also play with the display (can make it appear to be there, just invisible, or no sign of it at all..):

var element = document.getElementById('elementID');
element.style.display = 'block';
element.style.display = 'inline';
element.style.display = 'none';

I would suggest giving the menu elements you want to hide/show IDs (whether they are table, tr, td, img, etc.. doesn't matter), because that way you can use document.getElementById('...') to get the element quickly, and determine whether you want to show/hide it, etc..

Good luck, hope to see the end result!

08-12-2004, 01:34 AM
Hey, thanks for the help!

08-12-2004, 07:52 AM
Allright, I'm back and I've got some mickey moused code put together. Using a combination of Dreamweaver's Javascript rollover (which doesn't seem very effecient) and the code that Sad69 provided, I'm able to make my menus appear and disappear onMouseOver.

onMouseOver="ShowMapping(); MM_swapImage('mapping','','MenuImages/mappingOver.png',1)"

This works great, however, if I want to hide other menus, it doesn't work out to well. For example:

onMouseOver="ShowMapping(); MM_swapImage('mapping','','MenuImages/mappingOver.png',1); HideMisc(); HideGraphics();"

doesn't work. Is there something else to calling multiple functions?


Nevermind, I solved that problem by using a different roll over method.
Now Ive got another one.

Im gonna eat my words about simple if constructions, and ask for some help... I don't see why this doesnt work, but it doesnt.

function CheckMiscStatus() {
if ( Misc.src='MenuImages/MiscOver.png' ) { Misc.src='MenuImages/MiscSit.png' };

and its being called by an onMouseOut.

On MouseOut, I want it to check if the Misc image is MiscOver.png, and if it is, then change it to MiscSit. If it's not MiscOver.png (in this case, it will only be MiscDown.png), then I don't want it to do anything. So basically, how I'm wanting things to happen is this:

1. User mouseOuts on image
2. Javascript function CheckMiscStatus() is called
3. Function checks whether Misc.src is "MiscOver.png", and if it is, then it will change Misc.src to "MiscSit.png"
4. If Misc.src isn't "MiscOver.png", then nothing will happen.

However, its not happening like that. How come? Just tell me why it's not working and I'll probably be able to fix it.

Willy Duitt
08-12-2004, 08:43 AM
Most rollovers work by changing the image onmouseover and then again onmouseout. Here is a simple example...

<image name="Misc" src="MenuImages/MiscSit.png"


08-12-2004, 08:48 AM
You need to use conditional operator (==) not assignment operator (=)

if ( Misc.src='MenuImages/MiscOver.png' )

But Image.src returns the absolute path of the image, so it would not ever equal to a relative path. What you need to do is just check for the existense of MiscOver.png in the src.

if (Misc.src.indexOf("MiscOver.png")!=-1) {
Misc.src = "MenuImages/MiscSit.png";

08-12-2004, 06:19 PM
Thanks willy, thats the exact thing I'm doing, except for onMouseOut, its doing the function instead of changing the image.

Glenn, I just slapped myself because of the simplicity and how I forgot that == isnt the same as =.

08-13-2004, 02:49 AM
That didn't work. How I see that happening, is it checks if the image is "MiscOver.png" and if it is, then it changes the image to MiscSit.png, right?

08-13-2004, 03:36 AM
It checks if the src of the image contains the string "MiscOver.png". If it has, then it change the src to "MenuImages/MiscSit.png".

08-13-2004, 04:15 AM
It didn't work :-/

Okay I have two options here, one is the above thing, which didn't work.

The second one is to do something like this:

function ShowMapping() {
var element = document.getElementById('Mapping');
var background = document.getElementById('MappingCell');
element.style.visibility = 'visible';
background.style.background-image = 'url(menuImages/mappingDown.png)';

However, the background-image property won't set because of the '-' between background and image. How would you change background-images using that method? Is it not possible?

Willy Duitt
08-13-2004, 11:31 AM
Javascript uses the camelCase convention rather than hyphenated....
Try: backgroundImage


08-13-2004, 07:46 PM
Thanks, that helps out with something else too. Ive got another problem/hitch now. Rather then have the image being replaced for a rollover, I've been toying with the idea of having a layer of the image, and then onMouseOver, making that layer become visible, then onMouseOut, the layer nonvisible again. The code I'm using is:

function ShowXangaLayer() {
//Get Button IDs
var XangaLayer = document.getElementById('XangaLayer');
XangaLayer.style.visibility = "visible";

function HideXangaLayer() {
//Get Button IDs
var XangaLayer = document.getElementById('XangaLayer');
XangaLayer.style.visiblity = "hidden";

1. Img onMouseOver calls ShowXangaLayer, which makes the layer visible, this works fine
2. The Layer's OnMouseOut calls HideXangaLayer, which isn't making the layer hidden again. Any reason why?

Willy Duitt
08-13-2004, 09:41 PM
You are missing an i....
XangaLayer.style.visibility = "hidden";


08-13-2004, 09:53 PM
DOH! Man I feel dumb now.

02-07-2007, 06:41 PM
Better you use Dreamweaver JavaScripts. Then you have automatically an easy way to create automatically JavaScripts that are compatible to all browsers. (You can use it for simple operations hiding and showing layers, or creating navigation menus. There are a lot more posibilities given.)

You only have to know, the new firefox browser is case sensitive, therefore you will only find an object, it the id or name matches fully with the search string in the javascrip function.