There are two states of a sub menu item generally. In the code we have been talking about so far, when a menu item appears, it is brown; when the mouse pointer goes over it, it is firebrick. This is done by changing the background color of the table cell of the sub menu item. In this part of the series I show you how you can use two images instead of two background colors to indicate these two states of a sub menu item. This is the final part of a ten-part series on building a common menu browser.
Finishing Touches for a Common Browser Menu - Modifying the code (Page 2 of 5 )
There are some modifications we have to make to the code so that it accepts the images as we want it to. Before we carry on, know that the images will show up in place of the brown and firebrick colors. So it is the statements that deal with these features that will be affected.
For these statements concerning the sub menus, change all the JavaScript object attributes of "backgroundColor" to just backgroundImage. Here we shall be dealing with images in place of colors, so this change is necessary. For those statements not in if-conditions, wherever you have “brown,” replace it with “url('normal.gif').” Similarly, replace all "firebrick" with "url('over.gif')." However, for the if-conditions use “url(normal.gif)” for “brown” and "url(over.gif)" for "firebrick;" that is, the same phrase, without the inner single quotes.
With these changes, your code should work with Internet Explorer, Mozilla Firefox and Netscape. The images I used have outlines. So, if you try my code it will appear as if the menu items have borders.
You can download the complete modified code, including the images, from
Extract the images into one folder, and double-click the HTML file.
We now have two complete codes: one with images and one without.
Opera and the Non-image Code
I tried the non-image code (the previous code you downloaded) with Opera; it did not work. The reason is that Opera does not recognize the names of colors e.g. brown and firebrick in its if-conditions (tests). I had to replace “brown” with “#a52a2a” and “firebrick” with “#b22222” in the if-conditions. The letters in the hexadecimal have to be in lower case.
The complete non-image code for Opera can be downloaded from:
I did not have the time to see how to make the image code work with Opera. However, a similar analysis would lead you through; that is, you open it in Opera, find out the statements that do not work, and re-write them. If you want any of the code to work with Safari, use a similar procedure.
HTML 
Concluding a Menu for All Browsers
