Image Menu
Image Menu
You can control the vertical spacing between menu links with CSS
by setting up a class for the menu links and specifying line height
as shown below. See the source code on this page for the list
formatting with CSS and how to load the button image.
NOTE: I had to take the code for this vertical menu off the page as
too many idiots were copying it without changing the urls to point
to their own site and then I was getting a lot of bogus site-wide
links from other sites. Just set up a simple menu for your site
encased in a list format and it should work.
Smart Survey
Smart Poll
Smart Quote
Smart Guestbook
Smart Referrer
Design Packages
Instant Quote
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
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.
http://msdn.microsoft.com/en-us/library/aa218659(v=office.11).aspx.