Sure, glad to provide it.  Here's how my theme function ended up:

function mytheme_menu_links($links) {
 global $base_path;
 $directory = drupal_get_path('theme','mytheme');
 if (!count($links)) {
   return '';
 }
 $level_tmp = explode('-', key($links));
 $level = $level_tmp[0];
 $output = "<ul class=\"links-$level\">\n";
 foreach ($links as $index => $link) {
   $link['html'] = TRUE;
   $output .= '<li';
   if (stristr($index, 'active')) {
     $output .= ' class="active"';
   }
   switch ($link['title']){
     case "Home":
       $button = "<img src=\"".$base_path.$directory."/images/btn_home.jpg\" height=\"40\">";
       $img_class = "home";
       break;
     case "About the Center":
       $button = "<img src=\"".$base_path.$directory."/images/btn_about.jpg\">";
       $img_class = "about";
       break;
     case "Sponsors":
       $button = "<img src=\"".$base_path.$directory."/images/btn_sponsors.jpg\">";
       $img_class = "sponsors";
       break;
     case "Board of Directors":
       $button = "<img src=\"".$base_path.$directory."/images/btn_board.jpg\">";
       $img_class = "board";
       break;
     case "Resources":
       $button = "<img src=\"".$base_path.$directory."/images/btn_resources.jpg\">";
       $img_class = "resources";
       break;
     case "News":
       $button = "<img src=\"".$base_path.$directory."/images/btn_news.jpg\">";
       $img_class = "news";
       break;          case "Store":
       $button = "<img src=\"".$base_path.$directory."/images/btn_store.jpg\">";
       $img_class = "store";
       break;
     case "Contact":
       $button = "<img src=\"".$base_path.$directory."/images/btn_contact.jpg\">";
       $img_class = "contact";
       break;     }
   $output .= ' class = "';
   $output .= $img_class;
   $output .= '">'. l($button, $link['href'], $link['attributes'], $link['query'], $link['fragment'], $link['absolute'], $link['html']) ."</li>\n";
 }
 $output .= '</ul>';

 return $output;
}

It's probably not as pretty as it could be since I hardcoded the image names for the buttons, but I'm not real good with regex stuff, so this will do.  Also, one thing that is left out in this chain was that I had to add the $link['html'] parameter to the l() function (it's at the top of the for loop to generate each item) so that my <img> tags would be written out as HTML.  Notice that I also added a class to the <li> tag for each item so that I could specifically target it with CSS.

Another interesting thing that I discovered has to do with the CSS to display the buttons.  For some reason (and if somebody could explain this, that would be great), getting the buttons to display inline without any spaces between them didn't work with this CSS:

ul.links-menu li {
 display:inline;
 list-style-type:none;
}

This left spaces between the images (making it too wide for the page), even when there was no padding or margins set on any of the selectors.  With the help of a designer friend of mine, I changed it to

ul.links-menu li {
 display:block;
 float:left;
 list-style-type:none;
}

and they display just fine.

As for the mouseover functionality, I haven't been able to get that to work yet.  I've tried using a:hover with my class selector that I added, like this:

li.home a:hover {
 background-image: url(images/btn_homeup.jpg);
}

but no dice.  If anyone has a suggestion for doing this, I'm all ears.

Steve


Brett Evanson wrote:
Steve,

I'm trying to do something just like this, and I was wondering if you had a chunk of code you wouldn't mind sharing? Also, did you get the mouse over to work? I could help with that, if I had something to start with. I have done this, but I've always done it as a hack, and not as a theme function.

Brett Evanson

On Mon, Mar 24, 2008 at 10:04 AM, Steve Edwards <killshot91@comcast.net> wrote:
Actually, that's what I did.  I put a copy of theme_menu_links() in
template.php and renamed it to mytheme_menu_links(), and then in
page.tpl.php I changed it to

theme('menu_links', $primary_links);

and that's worked pretty well.  Now all I have to do is get a mouseover
effect to work and get the images aligned properly.

If anybody is curious to see this and has any suggestions, I'm working
on the page at http://dev.capusfiresafety.org (Drupal), and trying to
get it to look like http://www.campusfiresafety.org (non-Drupal).

Thanks.

Steve

Eric McKenna wrote:
> use theme_image to create your image source.  For the path, use
> path_to_theme() . "/images/yourimage.png"
>
> Another option entirely, is to create your own theming function.  I
> like to do this when I have a totally separate primary links section.
>
> themename_do_my_links($links) { ... }
>
> then in page.tpl.php file use theme("do_my_links", $primary_links) for
> the main nav items
>
> This makes it easy to separate display of your primary links with any
> other menus you have.
>
>
> On Mon, Mar 24, 2008 at 10:25 AM, Steve Edwards <killshot91@comcast.net> wrote:
>
>> I tried doing that, but I haven't had any luck with that.  Would I use
>>  the background-image property for the list item?  Or is there a better
>>  property to use?
>>
>>  Steve
>>
>>
>>
>>  Michael Prasuhn wrote:
>>  > While this isn't exactly the answer to your question, which I see that
>>  > you found on your own. I would definitely recommend doing the image
>>  > replacement via CSS, so that print and screen reading versions of your
>>  > site don't have any loss of experience. In my experience this also is
>>  > better for browsers that have images turned off as well.
>>  >
>>  > -Mikey P
>>  >
>>  >
>>  > On Mar 23, 2008, at 2:26 PM, Steve Edwards wrote:
>>  >
>>  >> I'm trying to edit my primary links menu to replace the text with a
>>  >> button image, and I'm having a problem with getting my <img>
>>  >> tag to display.  I've overridden the theme_menu_links() function in
>>  >> template.php, and it looks like what I need to do is replace
>>  >> $link['title'] with the <img> tag.  To do this, I added this line to
>>  >> the function:
>>  >>
>>  >> $link['title'] = "<img src=\"images/btn_home.jpg\">";
>>  >>
>>  >> However, the whole tag is displayed as text on the page, and when I
>>  >> view source, this is what I see for the link:
>>  >>
>>  >> <li><a href="/drupal57/" title="Home page" class="active">&lt;img
>>  >> src=&#039;images/btn_home.jpg&#039;&gt;</a></li>
>>  >>
>>  >> I don't understand this, because in other places in the function,
>>  >> that is how tags are written out in the code.  What do I need to
>>  >>  change to get the actual quotes and < > symbols written out
>>  >> correctly?
>>  >>
>>  >> Thanks.
>>  >>
>>  >> Steve
>>  >> --
>>  >> [ Drupal support list | http://lists.drupal.org/ ]
>>  >>
>>  >
>>  > __________________
>>  > Michael Prasuhn
>>  > mike@mikeyp.net
>>  > http://mikeyp.net
>>  > 949.200.7595
>>  > 714.356.0168 cell
>>  > 949.200.7670 fax
>>  >
>>  >
>>  >
>>  --
>>  [ Drupal support list | http://lists.drupal.org/ ]
>>
>>
--
[ Drupal support list | http://lists.drupal.org/ ]



--
Brett Evanson
brettev@gmail.com
801-599-0584