By Mr Cronk on

I'd like to replace the links in my menus with image files which will to serve as buttons. I've read around this, but the solutions I've found so far have been for earlier versions of Drupal and I simply can't get them to work in Drupal 6.

I'd like to try this for both navigation menu along the side, and the primary links menu along the top. I'd also like to incoporate a rollover so the buttons actually "click"! Can anyone offer advice on how to acheive this? thanks!

⋅ Categories: Drupal 6.x

Comments

iqamar’s picture

iqamar commented

i am using drupal 6.. and i am using icons as my primary link...just check ur primary link menu id and in the style.css find the "ul.primary-links li a, ul.primary-links li a:link, ul.primary-links li a:visited" add the image to every primary link..
thats it..

Anonymous’s picture

Anonymous (not verified) commented

This page was most helpful to me when I was trying to do something similar: http://drupal.org/node/62149 . I wanted icon button for the primary links menu. Scroll down to Solution 4 to see details on the approach that I used. I started in a D5 site, but recently ported to D6.10 without any problems.

Here's the function code I have in template.php

// Use icons for primary menu
function primary_links_icons_only() {
  $links = menu_primary_links();
  $level_tmp = explode('-', key($links));
  $level = $level_tmp[0];
  $output = "<ul class=\"links-$level\">\n";
  $l2i['pattern'] = '$(<a.*>)(.*)(</a>)$ie';
  $l2i['replacement'] = "\"\\1\".'<img src=\"/'. path_to_theme() .'/images/icons/'.str_replace(' ','_',strtolower('\\2')).'.png\" alt=\"\\2\" title=\"\\2\" />\\3'";
  if ($links) {
    foreach ($links as $link) {
$link = l($link['title'], $link['href'], $link['attributes'], $link['query'], $link['fragment']);
          $output .= '<li>'. preg_replace($l2i['pattern'],$l2i['replacement'],$link) .'</li>';
    };
  $output .= '</ul>';
  }
  return $output;
}

Here's the code I have in page.tpl.php:

<?php if ($primary_links): ?>
           <div id="primary">
      <?php print primary_links_icons_only(); ?>
      <?php print $search_box; ?>
            </div> <!-- /#primary -->
         <?php endif; ?>

And I have the images in / sites / all / themes / themename / images / icons / . You can see it in action at http://mouse-map.com/ . To do rollover/hover effects, I think some CSS specs could work. Haven't tried it, although it might be interesting to try.

Keep us posted on how you're doing!
Anne

Amy Stegmann’s picture

Amy Stegmann commented

I am also using Drupal 7 and looking for a solution- did you get yours answered? If so can you share what you did please?