?
Solved

transparent pop-up menu system

Posted on 2002-07-10
4
Medium Priority
?
1,002 Views
Last Modified: 2013-11-28
I want to make a transparent pop-up menu, preferably in JavaScript.  By "pop-up menu" I mean a menu that pops-up onMouseOver (or on-click) of an image.  By "transparent" I mean that the menu that pops up is composed of transparent GIFs so that A) the items in the menu are cool looking non-square graphics and B) you can see around the non-square edges to the static web page contents underneath it.

Oddly enough, I have never seen such a pop-up meny on any website I have ever visited, though I must have seen hundreds of popup menus on websites.  However, I have seen enough separate accomplishments in DHTML to believe it must be possible.  In fact, the two most common DHTML things I have seen are 1) (opaque) pop-up menus and 2) transparent floating images that can be moved around the screen.  It seems to me that it must be possible to combine these DHTML concepts to create a pop-up menu composed of transparent images.

I'm very familiar with javascript and I would like to use that to implement this idea.  I saw a vague reference in another topic on EE that refered to a site that did something they called transparent popup menus using flash.  Unfortunately when I followed their link to the site that supposedly did this, I was unable to find any popup menus, so I assume that the site changes since the posting of that message and now.  I don't want to use flash because I have a philisophical problem with requiring users to download a plugin: I won't do it!  Also, I am developing this website for a person who has absolutely no knowledge of programming or web scripting and I feel more comfortable that I can make it maintainable for this person if I use javascript rather than flash (which I've never used before due to my no plugins philisophy).

ANYWAY, I have a few examples of DHTML popup menus in javascript to start from.  What I'm looking for is either complete code to an existing transparent pop-up menu system that I can simply plug-in and use (which would be ideal) or some advice on what basic appropach to take when developing this on my own.  Does anyone disagree with me that this is even possible?  Can anyone suggest a basic starting point for me to work on making the background of the pop-up menu transparent?  Is there a way to make the layer's background transparent using CSS style sheets?  Or should I use floating images that I substitute between the real image and a fully transparent image in order to show and hide the menus?  Or should I use images that I push off the screen when I hide them and bring back into view when I show them again?  What is going to be the most effective method, and what method do I have the most chance of making compatible between both netscape and IE?
0
Comment
Question by:ris
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
  • 2
4 Comments
 
LVL 19

Accepted Solution

by:
webwoman earned 400 total points
ID: 7144606
One easy way...

Put your 'menu' on a div that you show/hide based on the mouseover/click, and make it an imagemap with a transparent background.

I've done it before, I just don't have the code right here. But any standard show/hide script would work, and the map code could be in the unhidden part of the HTML -- if there's no image that calls it, it won't do anything.

I think I set it to key off the mouse position, so it showed up at your cursor...I'd provide a link, but it's not even on a live site anymore.
0
 
LVL 1

Author Comment

by:ris
ID: 7146158
OK, that sounds pretty good.  I figured I might as well award you the points since that's about all I was looking for.

I'd also like to do roll-over highlighting on the menu items.  It's not very effective to do rollovers on an image map, though I can imagine that you could do it by swapping out the entire image map... Is there a way to define a single transparent layer that contains several transparent images?  Or do I need to create a separate layer for each menu item (each of which would be a single transparent image)?
0
 
LVL 19

Expert Comment

by:webwoman
ID: 7148292
Sure. Just create a rollover, contained in a table, the same way you would any other rollover. Use whatever you normally use (I use Fireworks, but ImageReady works too). You can have the javascript to swap them on the main page, or as an external .js file linked in the head tags, like normal. You put the table in the div, position that, show/hide it. While it's visible the mouseovers work, when you hide it they're gone. Basically you put the script on the main part of the page, and just put the table with the rollovers in the div.

Forms don't work well unless you keep them together on the div, but mouseovers, imagemaps, etc., work fine.
0
 
LVL 1

Author Comment

by:ris
ID: 7149141
Thanks for the info!
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

This article discusses how to implement server side field validation and display customized error messages to the client.
We aren’t perfect, just like everyone else.  Check out the email errors our community caught and learn the top errors every email marketer should avoid.
Viewers will get an overview of the benefits and risks of using Bitcoin to accept payments. What Bitcoin is: Legality: Risks: Benefits: Which businesses are best suited?: Other things you should know: How to get started:
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question