#1
  1. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    2
    Rep Power
    0

    Using Images for menu items in a DHTML menu


    Edit: For clarification, i'm trying to do the same thing as here:

    http://www.dynamicdrive.com/dynamici...menu/index.htm

    but with rollover images instead of text. (the example loads in the left margin)

    I'm trying to build a navigation system that uses nothing but images for each menu item. And, on top of that, each item must be a "rollover" with a normal, over, and on (active) state.

    I know, I know, that's easy, but the hard part is that there are submenus which follow the exact same design, load to the right of the main menu, and cover up the site's content while hovered.

    I've seen code for DHTML menus that do exactly what I want, but they are all built to handle text, not images. In a perfect world, that's what i'd be using, but I answer to a higher power (the client) and they want a SPECIFIC font for navigation - and that requires using images.

    Can anyone point me to a site, or discussion thread (i've looked here but can't find one that discusses my particular dilemma) that discusses this?

    Even better, could someone point me to a "cut and paste" solution somewhere? I've googled and searched Macromedia's Dev Exchange with no luck.

    The problem i'm having is getting a menu item to "unhide" a div onmouseover, while still retaining it's "hover" state, and then, when moving the mouse over the submenu, having that now unhidden div stay visible AND have the main menu item that called the submenu stay in a hover state.

    Thanks in advance,

    Dan Slater
    Zunch Communications, Inc.
    dslater@zunch.com
    www.zunch.com
    Last edited by MountinYew; July 13th, 2003 at 08:03 PM.
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    33
    Rep Power
    11
    I remember seeing an article by Danny Goodman on O'Reilly's web site about a week ago about using tri-state rollover images for this purpose. If the post is still there, it might be helpful. However, I don't understand the submenu part and how that is complicating things.

    I've done a similar thing using two-state rollovers using Photoshop 5.5 and ImageReady. I do have a drop-down menu on part of it (all done with images for the same reason--client preference, though I liked it better without the dropdown, which tends to jiggle under some circumstances). You can take a look at it at http://users.aol.com/wesuydam/lashish and see if it's like what you're trying to do. I've posted it there for the client to view, but feel free to take a look. Maybe it's not far off from what you're trying to accomplish.
    Bill
  4. #3
  5. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    33
    Rep Power
    11
    Well, I guess I missed your last paragraph before I made my reply... But I don't think it gives me anymore to add. Sounds pretty complex and a little hard for me to visualize. Maybe someone heavier duty will grasp it better than I.
    Bill
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    33
    Rep Power
    11
    Here's the url for Danny Goodman's article on tri-state image rollovers: http://www.oreillynet.com/pub/a/java...nusrecipe.html
    .
    Now, if somebody can just help me with my problem posted earlier....

    Let me know if this helps.
  8. #5
  9. No Profile Picture
    Junior Member
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    2
    Rep Power
    0
    Thanks but neither of those links is helpful to my problem.

    I have edited the message to give a link to a page that shows what i'm trying to do. (the example uses text, not images)

    Rollovers aren't a problem. Hiding/Showing a div isn't a problem. Sub menu's isn't a problem - it's just putting all three together that's the problem.

    Dan Slater
  10. #6
  11. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Jul 2003
    Posts
    33
    Rep Power
    11
    Okay, now I see what you're trying to do. But it looks like more of a project than I'm willing to take on as a freebie, so I'll just sugget a couple of approaches.

    One is to load the required font on your server and proceed with the text version you already have, which presumably works. If you don't already know how to do that, there's a post somewhere on these pages with a link that tells you how. (The question was "trying to see fonts," posted by snalex.) I suspect you already know how. The only downside is that the font has to be downloaded to every user's browser, but it should let you sleep nights.

    Another is to take a straight CSS approach and manage all the hidden and visible blocks or divs that way. I still haven't tried that one myself, because of the backwards compatibility issues.

    Last, I'd suggest that since you're using images anyway, you're probably using Photoshop. Construct the gifs you need in Photoshop, then load them into ImageReady. Work out the rollover states in ImageReady and it will generate the necessary Javascript for you. Establishing the rollover states can get pretty complex in a case like this, so I can't step you through it. The only catch is that if you're looking to cross a frame boundary, that won't work (at least I don't think--I've never tried it).

    The simplest would be to download the appropriate font, but the latter method should work if you take the time and don't need to cross frame boundaries.
    Bill

IMN logo majestic logo threadwatch logo seochat tools logo