Using images as tabs in the header

[wizbit]

Hi all, another newbie question!

 

I maybe asking too much here and certainly for someone new to this but instead of having the categories listed down the side in the left column i want tabs going in the header to represent each category. Much like is used on amazon.com.

 

Not only that but I would like to use images as the tabs rather than text with images either side. Plus, it would be nice if the tab for the the current category to be a different colour to the others and to have the sub categories listed underneath.

 

I am really sorry if that made no sense what so ever but basically I want to be able to emulate the navigation of amazon.com. I'm sure its a tall order but someone must have done it before because it is an effiecent way to navigate.

 

Any help you can give would be great because i'm going mad here and I have virtually no php knowledge.

 

Please help. Thanks,

 

wizbit

[♥Vger]

If you go to Contributions you'll find various add-ons you can install which will move Categories up into the header with images - some with drop-downs for sub-categories.

 

Vger

[wizbit]

Thanks Vger,

 

I have had a look at the contributions and the add ons that i have seen suggest that they use text with images to give the look of tabs however i was looking for something that uses pure images to represent the category and not involving text.

 

 

Does anyone know of a contribution that will do this?

 

wizbit

[♥bruyndoncx]

there isn't any yet, maybe you can create one :D

[wizbit]

Well sadly my knowledge of php is not up to much.

 

If anyone can suggest something then it would be very much appreciated!

 

Could I not put the images in the header and have them linked to the different categories i.e. index.php?cPath=1 ?

 

Then I could have an IF conditional for each tab so if cPath=1 display one image else display another? That could create the effect that say if you were looking at the lighting category that tab would be highlighted and when you left that category another image would be used.

 

Please tell me what you think, as you can probably tell I'm not very good at this sort of thing and desperate to find the solution to this.

 

Does any part of my idea make any sense?

 

wizbit

[Wendy James]

Yes, you can do that.

 

The link will vary depending on where you put it. For links in the header you would use

 

<?php echo '<a href="' . tep_href_link('index.php'.'cName=whatever'). '" class="top"><img src="images/imagename.jpg" width="21" height="21" border="0" alt="whatever"></a>';?>

 

ofcourse 'index.php'.'cName=whatever' would depend on where you want to go. Easiest way to figure it out would be create the area first (by adding a catagory, image... whatever, then clicking the link and grabbing it from your browser.

 

forgot to mention that you can use mouseover images... the same exact way you would in a full html page, you just have to make sure the way you link is correct so you do not lose the sessions while people are shopping, because they will lose what they put in thier carts.

[wizbit]

Thanks Wendy thats brilliant!

 

Couple more things though. I've tried writing an IF conditional so that the tab images change when you are looking at that particular category but I can't get them to work. Any ideas?

 

Also, how can i display the sub categories below the image tabs?

 

Many thanks,

 

wizbit

[gareth123456]

Try this:

 

Category Tabs with Subs

 

Let me know if it does the job - it worked for me! Editing the images was also pretty easy.