Rollover Image Links in Categories Sidebox

Hey everyone,

Forgive me, i've been searching for the past two days... the info out there seems to be incomplete. and any helpful past links seem to be broken.

Can someone please help create a tutorial to **replace category links with images and rollovers. ** (for the clients who insist on having their own font for the categories sidebox)

vers. 1.3.0.1

I think it will help so many people... including myself.

thanks so much in advance...

I'm wondering...is the subject taboo? maybe its' not possible. if not, will one of the experts please just tell me so...

and if it is possible... maybe the specific direction towards it. If I can get it to work, I will gladly write the tutorial.

thank you.

Is this for just the sidebox headers?

no, they actually want the categories to be in a cursive font.

so i need to make slice gif's or jpg's and replace the links with buttons that will send them to the categories...

thanks for looking into it...

I'm not a graphics expert so I'm not sure how to actually begin to set this up. I think it would be possible but beside the graphics you'd have to modify a couple of template files as well.

cool. thanks Clyde.

I think i've got the graphics part under control... but knowing the template to modify and the code is the tricky part for me...

thanks again...

You would create an override file for templates/YOUR_TEMPLATE/sideboxes/tpl_categories.php

In there you would find references to $box_categories_array[$i]['name'] and replace them with something like > zen_image($template->get_template_dir($box_categories_array[$i]['name'] . '.gif', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . $box_categories_array[$i]['name'] . '.gif', $box_categories_array[$i]['name'])
If you're not using subcategories you could simplify the code in the template and not have to do this three times :smile:.

yeah!

thanks Kuroi...

I'm going to try that out today. I'll post to everyone if it works.

If you want to do rollovers, either via javascript, or the CSS clipping method, you may want to add extra info the <img> tag. Consequently, here is the full schema of the zen_image function> zen_image(image source file name, alt text, width, height, other parameters)For both rollover techniques you would need to set the 5th parameter simply as a string of the relevant inline javascript or inline CSS.

Kuroi...

you are the best.

Thank you. It worked perfectly.

Still trying to grasp the rollover part. But your code and idea were perfect. This is the answer...

kuroi:

You would create an override file for templates/YOUR_TEMPLATE/sideboxes/tpl_categories.php

In there you would find references to $box_categories_array[$i]['name'] and replace them with something like
If you're not using subcategories you could simplify the code in the template and not have to do this three times :smile:.

For beginners like myself, what does ^^that^^ mean?

Kuroi,
I totally don't get the zen_image example. I have opened a thread couple of days ago, asking simmilar question: I need to replace all categories, subcategories and any other sideboxes text with images (let's skip the 'why?')

I have a jscript which is used in other pages on the site. Here is an html example of rollover image (i.e. navnews.jpg = reg. image; navnews_.jpg = rollover image):

<a href="URLHERE" onmouseover="MM_swapImage('navnews','','icons/navigator/newsc_.jpg',1)" onmouseout="MM_swapImgRestore()"> <img src="/icons/navigator/newsc.jpg" name="navnews" width="97" height="30" alt="articles and news" border="0" /> </a>

I was thinking to incorporate what I need (above) around the code in categories.php, but when I read your post about zen_image, I'm getting lost.

I can't find any explanation to what "$box_categories_array[$i]['name']" means...

I don't understand how this code:

zen_image($template->get_template_dir($box_categories_array[$i]['name'] . '.gif', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . $box_categories_array[$i]['name'] . '.gif', $box_categories_array[$i]['name'])

applies to the zen_image function - which commas are the separators of the properties? what is the '/' stands for? in which folder the images go to?

And, is there a way to incorporate what I have presented above?
Thanks,

I'm not giving up that easily:

Based on the zen_image function and the replacement code Kuroi have posted:

zen_image(image source file name, alt text, width, height, other parameters)

zen_image($template->get_template_dir($box_categories_array[$i]['name'] . '.gif', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . $box_categories_array[$i]['name'] . '.gif', $box_categories_array[$i]['name'])

I'm guessing the following:

image source file name = $template->get_template_dir($box_categories_array[$i]['name'] . '.gif', DIR_WS_TEMPLATE, $current_page_base,'images'). '/' . $box_categories_array[$i]['name'] . '.gif'
alt text = $box_categories_array[$i]['name']
width = empty
height = empty
other parameters = empty

1. Is my logic correct?
2. How to show the width/height variable then? Is there code for it?

Thanks,

0101101011:

width = empty
height = empty
other parameters = empty

2. How to show the width/height variable then? Is there code for it?Those parameters are optional. If not specified, they default to ... defaults, which typically means the image is displayed in its normal dimensions -- ie: the image is read, the dimensions calculated, and the html that is built to output the IMG tag uses the dimensions read from the image file.
   Thus, there is no need to specify the parameters which were omitted from the example you quoted.

Hey guys, first off let me begin by thanking you all for the information and help that has been posted throughout this entire forum. I am at the ends of my wits when it comes down to getting the roll-overs to actually work. I have gotten the images to show up but i still can't manage to figure out how to get the roll-overs to work preferably via css if not js, if anyone could possibly post a ready working script that would be extremely appreciated. Thanks in advance for all my zen contributors. I will be sure to help out as much as i can personally.

Try
http://www.zen-cart.com/index.php?main_page=product_contrib_info&products_id=609

Thanks Misty, but I have installed Category Dressing Mod, and that makes things so much more complex for what i need. I just need to get the roll-overs to work using the method described in this thread. It seems a couple of people have gotten it to work.

Any help with this issue, anyone???