Is your cloud always on? With an Always On cloud you won't have to worry about downtime for maintenance or software application code updates, ensuring that your bottom line isn't affected.
COURSE of the MONTH
12 days, 15 hours left to enrollBecome a Premium Member and unlock a new, free course in leading technologies each month.
Solved
Image rollover menu with dropdowns as images
Posted on 2008-06-12
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
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
[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
there are many options out there...
start here... http://www.twinhelix.com/dhtml/fsmenu/
just modfy the <a> with and <span> and use the css for the images... easy as pie... and i love the effect for this one...
start here... http://www.twinhelix.com/dhtml/fsmenu/
just modfy the <a> with and <span> and use the css for the images... easy as pie... and i love the effect for this one...
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)
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 »</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 »</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>
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
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> </div>
</BODY>
</HTML>
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
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
Featured Post
If you run run a WordPress, you understand the potential headaches you may face when updating your plugins and themes. Do you choose to update on the fly and risk taking down your site; or do you set up a staging, keep it in sync with your live site and use that to test updates?
Question has a verified solution.
If you are experiencing a similar issue, please ask a related question
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
Originally, this post was published on Monitis Blog, you can check it
here
.
In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
In this tutorial viewers will learn how to style a decorative dropcap for the first letter in a paragraph using CSS.
In CSS, create a new paragraph class by typing "p.fancy": Then, to style only the first letter of the first sentence, include the ps…
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS
Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
Suggested Courses
Course of the Month12 days, 15 hours left to enroll
777 members asked questions and received personalized solutions in the past 7 days.
Join the community of 500,000 technology professionals and ask your questions.