Image Map Drop Down Menu

Image Map Drop Down Menus

Use the following DHTML script to give a neat navigation for your site without much code involved. It is easy to integrate and modify for an amateur designer, however you need to have some knowledge of HTML.

Example

Example of drop-down menus

Note: In the above example there are 3 drop down menus, i.e. for the Services, Products and Rates links.

View Explanation of the Code

Cut and Paste Code

Cut 'n' paste code for the above Example

JavaScript Code download file

HTML Code

Instructions

Copy the Javascript code from the downloaded file and place it in the head content of your page and place the HTML code in the body of your page.

Make a transparent 1x1 gif called shim under your images folder as 'div' tag layers need an image to be present to work in lower versions of Netscape (below 6). You can manipulate the position of the layers where they appear in the following lines of code:

img = getImage("imgTabs");
x = getImagePageLeft(img);
y = getImagePageTop(img);
menuTop = y + 20 ; // LAYER TOP POSITION
SerL = x + 55 ; // 'Ser' LAYER LEFT POSITION
ProL = x + 120 ; // 'Pro' LAYER LEFT POSITION
RatL = x + 260 ; // 'Rat' LAYER LEFT POSITION

img represents the single image with an image map or the first image from the left if you are not using maps but a series or images (named imgTabs). To test this example you can save our image and change the path to it in the HTML. All the layers should have the same position from the top of img represented by menuTop (here we have used 20 you can change this according to your requirement). From the left of img the distance is given for each layer (we have taken 55, 120 and 260 which can be changed by you). If you have new layers be sure to add variables with the id of the layer followed by a capital 'L'.

If you want different colors for the menu rows, mouse over background and layer background then instead of changing it everywhere just do a find and replace for red (#990000), light yellow (#FFD784) and dark yellow (#FFB928) respectively.

If you are trying to use more drop down menus then you need to change the name of the new div layer id field and also change the reference to it in the link onMouseOver event for the map image or linked image. Also give each row (<tr> tag) a new id property for each row and change the reference to it in the link onMouseOver event for the respective content of the row.

Explanation of the Code

The JavaScript has the following main functions:

Function showLayer is used to make the tip box appear : This function first finds the top and left position of the place holder shim image (usually placed following the link) by its name passed to it while calling the function in the link onMouseOver event. Next it shows the div tag layer by the layer name passed to it by setting its visibility property (to 'show' in Netscape and 'visible' in IE).
Function btnTimer is called to hide the current drop down menu on the onMouseOut event after a small pause : This function waits for a small time period (here 1000 milliseconds i.e. one second) and then calls the hideLayer function (it passes the visible layer name).
Function hideLayer is used to hide the visible tip box by setting the visibility property of the layer to 'hide' in Netscape and 'hidden' in IE.
Function setBgColor is used to change the color of the row background for the menu items.

Image Map Drop Down Menu

Drop Down Menus