Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Image rollover menu with dropdowns as images

Posted on 2008-06-12
6
Medium Priority
?
577 Views
Last Modified: 2010-05-18
Hi Experts

I've spent hours looking for this.  Does anyone know how to create a vertical image roll-over menu with dropdowns which are also image rollovers?

I know how to create a Java vertical image rollover menu and I know how to create a CSS dropdown menu.  I just can't find any examples of the two combined.

There was a similar question on EE but suggested links don't work any more.  See http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_10627621.html?sfQueryTermInfo=1+dropdown+imag+menu+rollov 

Can anyone point me in the right direction?  Should it be all Java, or all CSS, or something else?

Many thanks

Will
0
Comment
Question by:willnjen
[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
  • 3
  • 2
6 Comments
 
LVL 4

Accepted Solution

by:
jeremyBass26 earned 2000 total points
ID: 21776249
there are many options out there...

start here... http://www.twinhelix.com/dhtml/fsmenu/

just modfy the  <a>  with &nbsp; and <span> and use the css for the images... easy as pie... and i love the effect for this one...
0
 
LVL 21

Expert Comment

by:naspinski
ID: 21776265
I would say pure css, just in case users dont have js (its faster too)

Something like this would work (mostly stolen from http://www.cssplay.co.uk/menus/ with a few modifications)
<head>
    <title>CSS Image Rollover Menu</title>
    <style type="text/css">
        #pmenu {padding:0; margin:25px 0 50px 15px; list-style-type: none; width:101px;}
        #pmenu ul {padding:0; margin:0; list-style-type: none; width:101px;}
        #pmenu li {position:relative;}
        #pmenu a, #pmenu a:visited {display:block;background:url(images/button.png);width:100px; font-size:10px; color:#fff; height:30px; line-height:22px; text-decoration:none; text-indent:5px; }
        #pmenu li:hover > a {background:url(images/button_down.png); color:#c00;}
        #pmenu li ul {display: none;} 
        #pmenu li:hover > ul {display:block; position:absolute; top:0; left:101px;}
    </style>
</head>
<body>
    <ul id="pmenu">
        <li><a href="#nogo">Top Level 1</a></li>
        <li><a href="#nogo">Top Level 2</a></li>
        <li><a href="#nogo">Top Level 3 &#187;</a>
	        <ul>
	            <li><a href="#nogo">Sub Level 1a</a></li>
	            <li><a href="#nogo">Sub Level 1b</a></li>
	            <li><a href="#nogo">Sub Level 1c &#187;</a>
                    <ul>
			            <li><a href="#nogo">Sub Level 2a</a></li>
			            <li><a href="#nogo">Sub Level 2b</a></li>
			            <li><a href="#nogo">Sub Level 2c</a></li>
		            </ul>
		        </li>
	            <li><a href="#nogo">Sub Level 1d</a></li>
	            <li><a href="#nogo">Sub Level 1e</a></li>
            </ul>
	    </li>
        <li><a href="#nogo">Top Level 4</a></li>
        <li><a href="#nogo">Top Level 5</a></li>
        <li><a href="#nogo">Top Level 6</a></li>
    </ul>
</body>

Open in new window

0
 

Author Comment

by:willnjen
ID: 21783519
Hi Guys

I am after a menu that uses images that change to another image as you rollover.  That combined with the multi-level dropdowns is what I can't do.

An example of the image changing rollover I want to use is here (not my work).. www.oceanridge.co.nz
There are two images which change when rolled over.  The code is below.

How do I add a level of dropdowns that are also image rollovers?

Cheers

Will
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<TITLE>Test image menu from Ocean Ridge</TITLE>
 
<SCRIPT src="http://www.oceanridge.co.nz/includes/scripts.js" language="javascript"></SCRIPT>
 
 
</HEAD>
<BODY>
  <div id="nav" style="left: -530px; top: 36px; width: 90px">
    
      <a href="/index.shtml" onMouseOver="MM_swapImage('home','','http://www.oceanridge.co.nz/images/navmain/home-1.gif',1)" onMouseOut="MM_swapImgRestore()"><img src="http://www.oceanridge.co.nz/images/navmain/home-0.gif" name="home" width="56" height="45" border="0" id="home"></a><br>&nbsp;</div>
</BODY>
</HTML>

Open in new window

0
Independent Software Vendors: 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!

 

Author Comment

by:willnjen
ID: 21783536
Hi jeremyBass26

I just read your post again and had another look at fsmenu.  Are you saying I could use images with fsmenu?  Can you show me an example?

Cheers

Will
0
 

Author Closing Comment

by:willnjen
ID: 31466817
I figured it out, fsmenu worked well.  Thanks!
0
 
LVL 4

Expert Comment

by:jeremyBass26
ID: 21784174
sorry i didn't get back... but glad to see you got it... have a great one... :)
0

Featured Post

Tech or Treat! - Giveaway

Submit an article about your scariest tech experience—and the solution—and you’ll be automatically entered to win one of 4 fantastic tech gadgets.

Question has a verified solution.

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

The article shows the basic steps of integrating an HTML theme template into an ASP.NET MVC project
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

604 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