Background Images for a Menu for All Browsers - Using Background Images
(Page 2 of 4 )
In this series, you can use the table (cell) borders as your menu item borders. This was difficult to accomplish in the previous series, considering our objective that the code should work with browsers without particular code segments addressing particular browsers. If you want borders in the previous series, you can use images that have intrinsic borders. If you do not want the table borders, then set the value of the of the border attributes of all the tables to zero. That is:
border = “0”
In this example, here, I allow the border, even though I use images.
We can use images as our cell background. What we need are two images: one when the menu item is displayed ordinarily, and the other when the mouse pointer is over the cell. Since we have cells of different widths, it may be difficult to have a pair of images that will cover these widths. Let us give up the desire to have images for the different widths.
We still want images. We shall use narrow images. For either of the images, we shall choose an image that is vertically narrow. The height of the image should be such that the height extends throughout the height of the cell. The problem here is that different browsers may give different heights for the cell. So you have to avoid choosing a short image. An easy way to get the height is to estimate the height and test the image with the five browsers.
For the code I will give you, there will be two images. The initial and default image that replaces the brown color has the file name "norm.gif." The image that replaces the firebrick color when the mouse pointer goes over a menu item has the file name "ov.gif." Each of these images is 10px thick and 20px high. I will show you how to make the images extend throughout the width of the different width cells.
Next: Changes to the Code >>
More HTML Articles
More By Chrysanthus Forcha
