Rollover/MouseOver IMAGES in sideboxes' sub/categories

Allright - I'm exhausted from research:
A (Stubborn) Client wants all sidebox links to be images - jpg (categories/subcategories/easy pages, etc.) instead of text.
This is my fifth hour searching this forum, and I cannot find simple, step-by-step plain english explanation.

I could 'hard-code' it, but I'm looking for more programmatical solution: so if a new category/subcategory/page is created, the image + rollover image should be created, and the rest is done in admin as usual.

I will very much appreciate feedback or direction (please, in really plain english if possible)

Thanks a lot!

tpl_categories.php looks like the place to do this as its where the hyperlinks are being created. As an example

$content .= '<a class="' . $new_style . '" href="' . zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['path']) . '">';

as long as you coordinate the naming of the pics you want with the name of the category, I don't think it would be that bad.....says the guy who doesn't have to write it :P

OK, here is what I came up with so far:
In a simmilar article (http://www.zen-cart.com/forum/showthread.php?t=39440) I found some clues, but still I'm not sure how to incorporate it.

I use the example here from 'to-be-alterated' categories.php page. Also, I'm using jscript for image rollover (MM_swapImage), which is already incorporated in other pages on the site. The zen cart version is 1.3.7.

on line 67, starting with

$content .= '<a class="' . $new_style . '" href="'

To the '">' end part, I'm adding the code that calls jscript:

'" onmouseover="MM_swapImage(''. REGULAR_IMAGE_NAME . '','','' . **ROLLOVER_IMAGE_LOCATION_AND_IMAGE_NAME_WHICH_IS_THE_SAME **. '_.gif',1)" onmouseout="MM_swapImgRestore()">'

The text in bold represents the part that gives me so much headache (I know that in some instances it is the "$box_categories_array[$i] ['name']" part that need to be substituted, but I'm not sure how).

So far, we have indentified the "a href" tag.

Next, we need to supplement the text part of the category with an image:
This part of code is on lines 75, 79, and 85 in categories.php
We need to substitute the: $box_categories_array[$i]['name'], which calls the category name (defined in admin > categories/products) in text format.

Here is my img tag in full html:

<img src="**IMAGE_SOURCE**" name="**IMAGE_NAME**" width="**IMAGE_WIDTH**" height="**IMAGE_HEIGHT**" alt="**IMAGE_ALT_TEXT**" border="0" />

The full (current) line 75 looks like this:

$content .= '<span class="category-subs-parent">' . $box_categories_array[$i]['name'] . '</span>';

Now, I'm experimenting: Here is what I would do with it (and again, the bold text is the part I don't know how to write in 'zen code'; I will, however attempt something for a discussion):

$content .= '<span class="category-subs-parent"><img src="' . **zen_href_link(FILENAME_DEFAULT, $box_categories_array[$i]['IMAGE_NAME?'] **. '" name="' . IMAGE_NAME . '" width="' . IMAGE_WIDTH . '" height="' . IMAGE_HEIGHT . '" alt="' . CATEGORY_NAME . '" border"0" /></span>';

So, what I would like from you guys, my gurus and masters, to please help me understand and substitute the missing parts... I'm sure it is pretty simple... one just need to 'call' the correct function or format... and voila!

Thanks,

You made a good point, TMC_Sherpa: to coordinate the naming with the image names.

On the first look it seems easy, if, let say your category name consist of one word (Apples).

But what to do if the category has more than one word? There will be a space between them... i.e. California Apples for the category name, but then if I call the name through the script, the image would have to be named in some very, very weird way: california%20apples.gif (or whatever the equivalent for the space is "%20" or "20%"...).

Would that also be case sensitive?

Then, on the other hand, if creating image-friendly name (california_apples) - it will look very stupid in the category breadcrumb...

Anyone with suggestions?
Thanks,

As an idea of another alternative that you might explore, try this temporarily:

• go to Admin->Configuration->Layout Settings
• change "CSS Buttons" to "Yes"> CSS Buttons

Use CSS buttons instead of images (GIF/JPG)?
Button styles must be configured in the stylesheet if you enable this option.
-No
-Yes

This converts all image-based buttons to CSS-stylable objects not requiring actual images.
You could do similarly in all your sideboxes by converting all the generated links to "hoverable blocks" etc.

Turn the switch off when you're done playing.

Perhaps using the stylesheet options further may be an alternative for you ...