Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Page 1 of 2 12 LastLast
Results 1 to 15 of 17
  1. #1
    New Coder
    Join Date
    Aug 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Javascript Menu Help

    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.

  • #2
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Sadiq.

  • #3
    New Coder
    Join Date
    Aug 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

  • #4
    Senior Coder
    Join Date
    Feb 2004
    Posts
    1,206
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:
    Code:
    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..):
    Code:
    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!
    Sadiq.

  • #5
    New Coder
    Join Date
    Aug 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Hey, thanks for the help!

  • #6
    New Coder
    Join Date
    Aug 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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.

    Code:
    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:

    Code:
    onMouseOver="ShowMapping(); MM_swapImage('mapping','','MenuImages/mappingOver.png',1); HideMisc(); HideGraphics();"
    doesn't work. Is there something else to calling multiple functions?

    *EDIT*

    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.

    Code:
    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.
    Last edited by GP1183; 08-12-2004 at 07:13 AM.

  • #7
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Most rollovers work by changing the image onmouseover and then again onmouseout. Here is a simple example...

    <image name="Misc" src="MenuImages/MiscSit.png"
    onmouseover="this.src='MenuImages/MiscOver.png'"
    onmouseout="this.src='MenuImages/MiscSit.png'">

    .....Willy

  • #8
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,032
    Thanks
    0
    Thanked 248 Times in 245 Posts
    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";
    }

  • #9
    New Coder
    Join Date
    Aug 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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 =.

  • #10
    New Coder
    Join Date
    Aug 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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?
    Last edited by GP1183; 08-13-2004 at 01:52 AM.

  • #11
    Supreme Master coder! glenngv's Avatar
    Join Date
    Jun 2002
    Location
    Philippines
    Posts
    11,032
    Thanks
    0
    Thanked 248 Times in 245 Posts
    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".

  • #12
    New Coder
    Join Date
    Aug 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    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?
    Last edited by GP1183; 08-13-2004 at 03:31 AM.

  • #13
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Javascript uses the camelCase convention rather than hyphenated....
    Try: backgroundImage

    .....Willy

  • #14
    New Coder
    Join Date
    Aug 2004
    Posts
    11
    Thanks
    0
    Thanked 0 Times in 0 Posts
    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:

    Code:
    function ShowXangaLayer() {
    	//Get Button IDs
    	var XangaLayer = document.getElementById('XangaLayer');
    	XangaLayer.style.visibility = "visible";
    	XangaLayer.style.cursor='pointer';
    }
    
    function HideXangaLayer() {
    	//Get Button IDs
    	var XangaLayer = document.getElementById('XangaLayer');
    	XangaLayer.style.visiblity = "hidden";
    }
    Review:
    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?

  • #15
    Banned
    Join Date
    Sep 2003
    Posts
    3,620
    Thanks
    0
    Thanked 0 Times in 0 Posts
    You are missing an i....
    XangaLayer.style.visibility = "hidden";

    .....Willy


  •  
    Page 1 of 2 12 LastLast

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •