It's been a while since I've put together a guide on the usage of Textimage, but with version 2.2 right around the corner it seems like the time is right, plus it makes for a great way to test a module.

In this guide I will show you how to use Textimage for your primary links menu.

Notes:

• This is written with the assumption that you have Drupal and Textimage installed and setup and have reasonable knowledge in using them.
• Drupal 6 was used in writing this but the process should work on both Drupal 5 or 7 with minor modifications.
• Garland was used as the base theme but it should work for any theme with the appropriate changes made.
• It is highly recommended that you have the Vertical Tabs module installed to simplify the Textimage creation process, but not necessary.

Step 1 - Create your Textimage presets

1. Create three new Textimage presets (http://www.yoursite.com/admin/build/textimage/preset/new), below are the settings I used, any setting not listed below should be left with the default value:

   1. Name: primary_links_active
      Description: Active state for primary links image

      Font settings
      Font: Arial Black
      Size: 12
      Opacity: 50%

      Text settings – Margin
      Top: 36
      Note: Top margin is the twice height of the Textimage before the top margin is defined, to get this value simply click the Preview button under the Preview settings section, then view the properties of the generated image.

      Background settings
      Color: [blank]

   2. Name: primary_links_hover
      Description: Hover-over state for primary links image

      Font settings
      Font: Arial Black
      Size: 12
      Color: #FFFFFF
      Opacity: 75%

      Text settings – Margin
      Top: 18
      Note: Top margin is the height of the previous Textimage before the top margin was defined.

      Background settings
      Image: primary_links_active

   3. Name: primary_links
      Description: Default state for primary links image

      Font settings
      Font: Arial Black
      Size: 12
      Color: #FFFFFF

      Background settings
      Image: primary_links_hover

2. If everything is setup correctly you should see something like the image below when clicking on the Preview button under Preview settings on the final Textimage preset:

Step 2 - Modify your themes template.php

1. Open your themes template.php file in your editor of choice.
2. Copy theme_links() from http://api.drupal.org/api/function/theme_links/6 into your template.php file and replace 'theme' with the name of your theme (ie. garland_links()).

3. Change the following lines:
         if (isset($link['href'])) {
           // Pass in $link as $options, they share the same keys.
           $output .= l($link['title'], $link['href'], $link);
         }

   To:
         if (isset($link['href'])) {
           if (strstr($key, 'menu-')) {
             $path = theme('textimage_image', 'primary_links', $link['title'], array(), 'png', '', '', array(), TRUE, FALSE);
             $link['title'] = '<span style="background-image: url('. $path .')">'. theme('textimage_image', 'primary_links', $link['title']) .'</span>';
             $link['html'] = TRUE;
           }

           // Pass in $link as $options, they share the same keys.
           $output .= l($link['title'], $link['href'], $link);
         }

4. Enter the Performance page (http://www.yoursite.com/admin/settings/performance) and hit the Clear cached data button.
5. If all went well you should now see something similar to the image below:

Step 3 - Add buttons CSS

1. Add the following CSS to your themes stylesheet:

   .primary-links a img
   {
     height: 18px;
     visibility: hidden;
   }

   .primary-links a span
   {
     display: block;
     height: 18px;
   }

   .primary-links a:hover span
   {
     background-position: 0 -18px;
   }

   .primary-links a.active span
   {
     background-position: 0 -36px;
   }

That's it, as long as you followed the guide correctly your primary links should now be using your three state textimage preset.

For more information about Textimage or to download the latest version, checkout the project page: http://drupal.org/project/textimage