Replacing Categories - Tabs Menu with Images

[brandtim]

Do you want the headphones and microphones categories images to appear on every page or just the index page?

Either way, with only two categories it'd be a lot easier to hard-code it once. You could even check to see which category is currently selected and append it with the pink brackets.

Pretty simple, actually. If you'll just clarify for me which you are trying to do, I'll try to walk you through doing it.

BrandTim

[dvasdekis]

Do you want the headphones and microphones categories images to appear on every page or just the index page?

Every page, please. What I'd like to achieve is for the open main category (either Headphones or Microphones) to be at 100% opacity with a pink bracket next to it, and for the category that is not active to have a 50% opacity image without the pink bracket, and for this to change to 100% opacity on hover.

Hopefully THIS image gives you more of a clue as to what I'm on about (ignore the darker specials box on the right side, I'll add that later).

[brandtim]

Ok - change your includes/templates/wogeordie/templates/tpl_modules_categories_tabs.php to this:

<div id="navCatTabsWrapper">
<div id="navCatTabs">

<?php if ((int)$cPath != 2) { ?>

  <a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=1') ?>"><img src="headphones_100_perc.jpg" alt="headphones category" /> <span class="pink_braces">]]]</span></a>
  <br class="clearBoth" />
  <a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=2') ?>"><img src="microphones_50_perc.jpg" alt="microphones category" onmouseover="this.src='microphones_100_perc.jpg'" onmouseout="this.src='microphones_50_perc.jpg' /></a>
  
<?php } else { ?>

  <a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=1') ?>"><img src="headphones_50_perc.jpg" alt="headphones category" onmouseover="this.src='headphones_100_perc.jpg'" onmouseout="this.src='headphones_50_perc.jpg' /></a>
  <br class="clearBoth" />
  <a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=2') ?>"><img src="microphones_100_perc.jpg" alt="microphones category" /> <span class="pink_braces">]]]</span></a>
  
<?php } ?>

</div>
</div>
<?php } ?>

Brief explanation:

The "if ((int)$cPath != 2)" line checks to see which category (if any) is selected and load the appropriate image set based on that. The pink brackets are also appended to the currently selected category.

The onmouseover and onmouseout events switch the images between 50% and 100%.


Just be sure you get all of the image src files in this code correct to your image source files. You'll also need to style the images and the pink brackets.

BrandTim

[dvasdekis]

The "if ((int)$cPath != 2)" line checks to see which category (if any) is selected and load the appropriate image set based on that. The pink brackets are also appended to the currently selected category.

The onmouseover and onmouseout events switch the images between 50% and 100%.

Brilliant. Utterly brilliant. With a bit of fiddling, I got them working absolutely perfectly.

Thankyou so much, you've been a fantastic help. I'm one massive step closer to done now.

Really appreciated.

Results: http://test.headsonic.com

[brandtim]

Sweet. That looks really good. Glad I could help.

The more happy ZenCart site owners the better I always say.

BrandTim

[gjh42]

Looking good! Now just eliminate the "Heading 1" text from the cases and your titles will be done.

[mojodk]

Ok - change your includes/templates/wogeordie/templates/tpl_modules_categories_tabs.php to this:

<div id="navCatTabsWrapper">
<div id="navCatTabs">

<?php if ((int)$cPath != 2) { ?>

  <a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=1') ?>"><img src="headphones_100_perc.jpg" alt="headphones category" /> <span class="pink_braces">]]]</span></a>
  <br class="clearBoth" />
  <a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=2') ?>"><img src="microphones_50_perc.jpg" alt="microphones category" onmouseover="this.src='microphones_100_perc.jpg'" onmouseout="this.src='microphones_50_perc.jpg' /></a>
  
<?php } else { ?>

  <a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=1') ?>"><img src="headphones_50_perc.jpg" alt="headphones category" onmouseover="this.src='headphones_100_perc.jpg'" onmouseout="this.src='headphones_50_perc.jpg' /></a>
  <br class="clearBoth" />
  <a href="<?php echo zen_href_link(FILENAME_DEFAULT, 'cPath=2') ?>"><img src="microphones_100_perc.jpg" alt="microphones category" /> <span class="pink_braces">]]]</span></a>
  
<?php } ?>

</div>
</div>
<?php } ?>

Brief explanation:

The "if ((int)$cPath != 2)" line checks to see which category (if any) is selected and load the appropriate image set based on that. The pink brackets are also appended to the currently selected category.

The onmouseover and onmouseout events switch the images between 50% and 100%.


Just be sure you get all of the image src files in this code correct to your image source files. You'll also need to style the images and the pink brackets.

BrandTim

THIS IS A REALLY NICE FEATURE FOR ZEN.
This is it.. this is the answer to my headache. As a newbie, Im still figuring how's this one is done correctly. I changed includes/templates/CUSTUM_TEMPLATE/templates/tpl_modules_categories_tabs.php to your script.
I made all the pictures in the scripts & placed them in includes/templates/CUSTUM_TEMPLATE/images/

the images don´t show up & everything is centered looking like a mess.
It would be nice with guidance so even a real newbie like me would understand it

THANX ALOT

[brandtim]

I can try to help ... but I really need a link to your website so I can see exactly what's happening.

BrandTim

[teva]

I find this to be a great feature, but i can't get it to work in 1.3.8 version. After applying changes the page only loads header. Any idea what to do.

tnx

[brandtim]

teva,

I sounds like you have whitespace before or after a <?php ?> tag, but I can't tell without a link.

BrandTim