Background Images for a Menu for All Browsers

We have to make some changes to the code in order to support the images. For simplicity, we shall make the changes to affect only the drop down and sub menus and not the main menu. We begin with the CSS. Change all the following expressions in the CSS:

background-color:brown

to

background-image:url("norm.gif");

So, instead of a background color, we have a background image for the cells. Add the following expression next to each of the above code in the CSS:

background-repeat: repeat-x;

This expression causes the image to repeat along the cell (horizontally). So it does not matter how wide the table cell is; you will have a bar as the background of the cell due to the "repeat-x" property.

Let us see the changes to be made to the JavaScript code. Replace all the "backgroundColor" properties with "backgroundImage." Replace all the "brown" values with "url('norm.gif')." Replace all the "firebrick" values with "url('ov.gif')."

For the non-image code, the toChoose() function was:

function toChoose(ID)

{

currCellBgColor = document.getElementById(ID).style.backgroundColor; //background color of the current cell

if ((currCellBgColor == "firebrick")||(currCellBgColor == "#b22222")||(currCellBgColor == "rgb(178, 34, 34)"))

subMenuJustClicked = true;

}

Now with the images, it is:

function toChoose(ID)

{

currCellBgColor = document.getElementById(ID).style.backgroundImage; //background color of the current cell

if (currCellBgColor == "url('ov.gif')")

subMenuJustClicked = true;

}

Note that in the if-condition we have no longer taken into consideration the peculiarity of any browser. The expression "url('ov.gif')" in the if-condition is recognized by all of the five major browsers we use for testing. The other statements in the toChoose() function remain the same; only the test of the if-condition has changed.

That is all we need for the changes. I tested the code and it worked with the five browsers (Internet Explorer, Mozilla Firefox, Netscape, Opera and Safari). There is just a small problem with Opera. When you open the page with Opera and then move the mouse pointer over a main menu item, the default image (norm.gif) will go away, but you will not see the onmouseover image (ov.gif). This happens only once, for the first time; after that it does not happen again. After that you will be seeing the ov.gif image for any menu item (main menu, drop down menu or sub menu) that the mouse pointer goes over. This problem is negligible. So we will ignore it.

I want you to note that the code with background images does not really have any code segment specialized for any particular browser. The non-image code had the if-statement with bits for different browsers. This if-statement for the image code does not have these bits. So we can say that with the image code, we have attained our goal of having code that works for all browsers, without any code segment specialized for any browser. The trouble is that there is a condition, which is that you need to have background images and not background colors.

The complete image code can be downloaded from here:

versatileCommonMenuImg.ZIP

The image files are included. After downloading, unzip in one directory and double click the HTML file.