<a href="https://bytes.com/topic/javascript/answers/751048-loading-menu-using-javascript">loading menu using javascript

Hello,
I want to use Images as menu and menu items using javascript.The aim is that i have images with the menu items. when i click the image on that perticular mmenu item i want an image to be loaded there with that menu item highlighted.

Suppose the menu has
Home,Products,Contact us
The image has these items.
When the user clicks Home , i want the Image with Home highlighted to be loaded. when the user clicks Contact Us, The image with Contact Us highlighted to be loade.
Since this is a single image how can i detect what Menu Item or option is clicked by the user?
Please let me know asap

Hi,

Expand|Select|Wrap|Line Numbers

 
test_image = new Image();

function getLeaf(url)

{

    return url.substring(url.lastIndexOf("/")+1);

}

function highlightCurrentMenuItem()

{

    var currentLocation = getLeaf(document.location.href);

    var menu = document.getElementById("menu");

    links = menu.getElementsByTagName("a");

    for (i=0; i<links.length; i++)

    {

        var currentHref = links[i].getAttribute("href");

        var currentLeafName = getLeaf(currentHref);

        if (currentLeafName==currentLocation)

        {

            document.test_image.src = "images/globe.gif";

        }

    }

}

In every page use
[HTML]<body onload="javascript:highlightCurrentMenuItem();">[/HTML]
In other pages do like this;

In home page
[HTML]<li><a href="index.html" title="">
<img name="test_image" id="test_image" src="images/color_spacer.gif" align="top" />Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="">Services</a></li>
<li><a href="" title="">Portofolio</a></li>
<li><a href="contact.html" title="">Contact</a></li>[/HTML]

In contact_us page
[HTML]<li><a href="index.html" title="">Home</a></li>
<li><a href="" title="">About Us</a></li>
<li><a href="" title="">Services</a></li>
<li><a href="" title="">Portofolio</a></li>
<li><a href="contact.html" title="">
<img name="test_image" id="test_image" src="images/color_spacer.gif" align="top" />Contact</a></li>[/HTML]

SO ON.....

Happy Programming!
:)

Dec 20 '07 #2

Hi,
Forgot to say: color-spacer.gif is a blank image wich is replaced by globe.gif.
You can change the image as per your requirement. but the first one must be a blank image if you want to display the image whenwver the page is open.

Dec 21 '07 #3

Dec 21 '07 #4

sindhu

Hello Ranjan
Thanks alot for replying to my query...........:)
I used the code in my web page
I want a horizontl menu and each menu item has image before selcting and another image after selecting.
I mean to say there is a single image in which menu items are embedded .
when we click at any item position i want an image with that item highlighted to be uploaded.
Please help me in this.
thyanks alot again

Dec 21 '07 #5

Menu Loading Please Wait.....

Hello Ranjan
Thanks alot for replying to my query...........:)
I used the code in my web page
I want a horizontl menu and each menu item has image before selcting and another image after selecting.
I mean to say there is a single image in which menu items are embedded .
when we click at any item position i want an image with that item highlighted to be uploaded.
Please help me in this.
thyanks alot again

Hi,
For horizontal menu you can use style sheet to do that.
I have also used two images, one is blank(color_spacer.gif) image which is used before selecting and another image(globe_gif) after selecting.

I am giving you another simple code to do so.
The javascript code contain a function like this;

Expand|Select|Wrap|Line Numbers

 
test_image = new Image();

test_image1 = new Image();

test_image2 = new Image();

test_image3 = new Image();

test_image4 = new Image();
 
function put_image(page)

{

    if(page == "home") document.test_image.src = "images/globe.gif";

    if(page == "about_us") document.test_image1.src = "images/globe.gif";

    if(page == "services") document.test_image2.src = "images/globe.gif";

    if(page == "portfolio") document.test_image3.src = "images/globe.gif";

    if(page == "contact_us") document.test_image4.src = "images/globe.gif";

}

And just use the html code below in every page;

Expand|Select|Wrap|Line Numbers

 
      <ul id="menu">

        <li><a href="index.html" title=""><img name="test_image" id="test_image" src="images/color_spacer.gif" align="top" />Home</a></li>

        <li><a href="" title=""><img name="test_image1" id="test_image1" src="images/color_spacer.gif" align="top" />About Us</a></li>

        <li><a href="" title=""><img name="test_image2" id="test_image2" src="images/color_spacer.gif" align="top" />Services</a></li>

        <li><a href="" title=""><img name="test_image3" id="test_image3" src="images/color_spacer.gif" align="top" />Portofolio</a></li>

        <li><a href="contact.html" title=""><img name="test_image4" id="test_image4" src="images/color_spacer.gif" align="top" />Contact</a></li>

      </ul>

FOR HORIZONTAL MENU USE in style sheet

Expand|Select|Wrap|Line Numbers

 
#menu li {

    list-style-type: none;

    float: left;

    margin: 0 8px;

    height: 22px;

I think this is what you want.
It just works like this. Initially you are having the images before selecting and when ever a page is selected you just do one thing you use the put_image function in the body tag like this;
IN HOME PAGE:

Expand|Select|Wrap|Line Numbers

<body onload="javascript:put_image('home');">

IN ABOUT_US PAGE:

Expand|Select|Wrap|Line Numbers

<body onload="javascript:put_image('about_us');">

and so on.....
Make sure the parameter you are passing should match with that used in the function and as per the page from where you are calling it i.e. in home page the parameter should be "home", etc.

Happy programming!
:)

Dec 21 '07 #6

Similar topics

by: Naomi | last post by:

hello Could anyone please tell me if there is any way i can have the text "Menu Loading Please Wait..." appear while the js menu loads and then disappear after it loads ? hoping to hear some...

problems loading images...

by: Sam Carleton | last post by:

I feel like a complete fool! I should know the answer to the Q: How do I load an image with JS and replace the default image? Some background: My final objective is to have a web site where it...

Javascript Menu not loading images

by: John Ortt | last post by:

Hi Everyone, I have created a Javascript menu for my site which uses frames. The first stage loads fine but I want two drill down menus ("About Me Menu" and "Projects Menu"). The pages load...

Javascript Menu Not Loading Images - (Now with linked Webpage)

by: John Ortt | last post by:

Hi everyone, I posted with the title "Javascript Menu Not Loading Images" last week but I only posted the code as the site was on a corporate Intranet. Thanks to advice on the thread I have...

pre-loading images (script?)

by: VR | last post by:

Hi, I am trying to have a menu item (which is an HTML img) to change as a mouse moves over it. So, my code looks something like this: <a onmouseover="ActivateImage('MyImage');"...

ASP.NET

AJAX page loading

by: paladin.rithe | last post by:

I'm new to AJAX programming (and JavaScript), but I've been picking up the idea pretty quick. I have a question though. With the project that I'm working on, I would like to have the main page...

Activex loading/swf & menu files

by: jennifer.lyell | last post by:

Hello, I am using Frontpage 2003 for a site design. I have 2 .swf files on the page as well as a menu bar (with cascading menus- created with All Web Menus Pro) that are on the page. When I...

Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"

Delay in loading Menu

by: aswathip | last post by:

My web application is developed in PHP. The Stylesheet for my Menu is written in a php file and CSS in javascript. When i access a page it shows the menu as such without any style. Main Menu...

HTML / CSS

by: taylorcarr | last post by:

A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...

Basic Javascript concepts

by: aa123db | last post by:

Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Migrating Website to Cloud - Emmanuel Katto

by: emmanuelkatto | last post by:

Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

What is ONU?

by: marktang | last post by:

ONU (Optical Network Unit) is one of the key components for providing high-speed Internet services. Its primary function is to act as an endpoint device located at the user's premises. However,...