Category Image Rollover Menu w/o Javascript

[ecockrell]

I'm in the middle of creating my first OSCommerce web site and I needed a menu system that I couldn't find in the contributions. So I thought I would give something back to the community that has already provided so much. You can get a preliminary view of the store and the rollover menus at IQ Furniture. It's a work in progress so please don't expect a complete 100% working web site. If there is enough interest I will make this a contribution once the project is complete.

 

Here is a little trick you can use to get rollover images without using javascript. And there are only three things you need to do: create your images, add a function to one php file, and add classes to your stylesheet.css file.

 

Step 1: Adding a New Function

Open the file /catalog/includes/boxes/categories.php with your favorite text editor. Then either add the function below or replace the function tep_show_category with the code shown below.

 

//-- BEGIN: Category Image Rollover Menu
 function tep_show_category_image_menu($counter) {

   global $tree, $boxContent, $cPath_array;

   // Add additional characters to this array that you wish to 
   // delete from the category name
   $illegalChars = array("'", "&");

   // use category name for menu class
   // The <a> tag will be inside two <div> tags
   $menuImage = strtolower(rtrim($tree[$counter]['name']));
   $menuImage = str_replace($illegalChars,"",$menuImage);
   $menuImage = str_replace("  "," ",$menuImage);
   $menuImage = str_replace(" ","_",$menuImage);

   $boxContent .= '<div class="menu_' . $menuImage . '_outer"><div class="menu_' . $menuImage . '_inner">';
   $boxContent .= '<a href="';

   if ($tree[$counter]['parent'] == 0) {
     $cPath_new = 'cPath=' . $counter;
   } else {
     $cPath_new = 'cPath=' . $tree[$counter]['path'];
   }

   $boxContent .= tep_href_link(FILENAME_DEFAULT, $cPath_new);
   $boxContent .= '">';
   $boxContent .= '</a>';
   $boxContent .= '</div></div>';

   if ($tree[$counter]['next_id'] != false) {
     tep_show_category($tree[$counter]['next_id']);
   }
 }

//-- END: Category Image Rollover Menu

 

 

If you added this code as a new function to categories.php then replace this line (it's at the bottom of the file):

 

tep_show_category($first_element);

 

with:

 

tep_show_category_image_menu($first_element);

 

If you replaced the function tep_show_category with the code provided, then there is nothing else to do.

 

 

Step 2: Creating Images

You will need to create images for every category and subcategory in your store. Create your category images, including the rollover image. Each pair of images must be the same size. Create a new image that is twice the height of your category images and the same width. Put the normal non-rollover image in the top half. Put the rollover image in the bottom half.

 

If your category images are 120 x 46, then your combined image will be 120 x 92.

 

 

 

Step 3: Adding Classes to stylesheet.css

You will need to duplicate these four classes for each category and subcategory. The class name is built from the category name. First the class name is converted to all lower case letters, spaces are replaced with underscores and illegal characters are removed. The array $illegalChars holds the characters to be deleted when creating the class name. Add any additional characters you need to this array. If you have any non-numeric or non-alphabetic characters in your category names (spaces and underscores are needed), add those characters to the array $illegalChars.

 

Each category name is prefixed with "menu_" and suffixed with "_inner" or "outer". If you have a category widgets then in the example below CATEGORY is replaced with widgets so the classes become menu_widgets_inner and menu_widgets_outer.

 

The width is the width of your image (120 in our example). The height is half the height of the combined image (46 in our example). Make sure you don't lose the negative values when replacing the height. Replace the url with the path to each category image.

 

TIP: Create your first group of four classes and edit so the name, height, width, and URL are all correct. Then duplicate the classes for each category. There will be less editing using this method.

 

 

.menu_CATEGORY_outer a
{
background: url("/images/menu_widgets.gif") top left no-repeat;
width: 120px; 
height: 46px;
text-decoration: none
}
.menu_CATEGORY_outer a:hover 
{
background-position: 0 -46px;
}
.menu_CATEGORY_inner
{
background: url("/images/menu_widgets.gif") top left no-repeat;
background-position: 0 -46px;
width: 120px; 
height: 46px;
text-decoration: none
}
.menu_CATEGORY_inner a
{
background: url("/images/menu_widgets.gif") top left no-repeat;
display: block;
width: 120px; 
height: 46px;
text-decoration: none
}

 

That should do it.

 

 

Eric