By highvoltage on

I've been searching for ways to replace primary menu items with images where there is support for a hover state, active state, and the text is removed/hidden. While I've found a few for drupal 5, I haven't seen any solutions dedicated to drupal six. I took a shot in the dark and tried to apply one of the drupal 5 solutions but it didn't work out. I'm not a programmer so this could have been my own fault easily.

The options I've been looking at can mostly be found here: http://drupal.org/node/62149

Anyway, is there an existing module or theme snippet that will do this for drupal six?

Thanks for reading.

⋅ Categories: Drupal 6.x

Comments

francort’s picture

francort commented

It is possible to do it through regular expressions, but it is not the only solution for this problem.
I would prefer to hide the text and add the images by changing the theme a little and working on css. I mean:
instead having this on your page.tpl.php

print theme('links', $primary_links, array('class' => 'links primary-links'))

you can have something like this:

          foreach( $primary_links as $key => $item){
          	$primary_links[$key]['title'] = '<span>'.$item['title'].'</span>';
          	$primary_links[$key]['html'] = true;
          }
          print theme('links', $primary_links, array('class' => 'links primary-links'))

Now you will have your text inside a "span" tag.
Each menu item has its own class and it is inside the ul with id primary-links, so you can change the background to make it the image you need, and since we have that "span" tag you can make the text disappear(visibility: hidden)

i hope this can help you

highvoltage’s picture

highvoltage commented

Thank you. That worked perfectly!

asak’s picture

asak commented

This is the best solution i've seen for D6 and images-for-menu-titles.

One question - how would you implement this for a regular menu (i.e. not the primary-links) ?

They are called through blocks and other menu modules - but i don't know where this needs to be changed.

highvoltage’s picture

highvoltage commented

I faced that issue myself asak, and I settled on the imagemenu module. It's very simple and it supports hover images.

Here it is: http://drupal.org/project/imagemenu

francort’s picture

francort commented

Add this function in your template.php:

function phptemplate_menu_item_link($link) {
  if (empty($link['localized_options'])) {
    $link['localized_options'] = array();
  }
  $link['localized_options']['html'] = true;
  return l('<span>'.$link['title'].'</span>', $link['href'], $link['localized_options']);
}

With this every menu item will have a "span" tag ( if you want it or not :)

If you're not using phptemplate engine, then put that function on your .theme file and rename it as "mytheme_menu_item_link".

highvoltage’s picture

highvoltage commented

I wonder, does an excess of span tags affect seo at all?

jaap76’s picture

jaap76 commented

@: francort

This php code works, I can see the text links on the site, but where do I enter the image code? (For every menu item I need a different image, because the font I'm using isn't a standard browser font. Or can I upload the fonts somewhere to my server, so the browser download these automatically? ..and how to do that?)

Thanks.

jaap76’s picture

jaap76 commented

I found 'signwriter' that fixes my problem. Thanks anyway.