Существует множество путей для использования картинок в верхней горизонтальной навигации. Мы рассмотрим быстрый и простой способ, без установки каких-либо дополнительных плагинов, без изменения стандартных таблиц.

Все что нам потребуется - файл темы: theme.php.

На примере старенькой темы Similitude06, разберемся как выводятся ссылки в верхнее меню:

 

function render_header($header_content) {

global $theme_width;

echo "<table align='center' cellspacing='0' cellpadding='0' width='$theme_width' class='outer-border'>
<tr>
<td>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td class='full-header'>
<table cellpadding='0' cellspacing='0' width='100%'>
<tr>
<td>$header_content</td>
</tr>
</table>
</td>
</tr>
</table>";

echo "<table cellpadding='0' cellspacing='0' width='100%'>n<tr>
<td class='sub-header'>".showsublinks("&middot;","white")."</td>
<td align='right' class='sub-header'>".showsubdate()."</td>
</tr>
</table>";

echo "<table cellpadding='0' cellspacing='0' width='100%'><tr>";

}

обратите внимание на 32 строку: функция showsublinks отвечает за вывод строки горизонтальной навигации.

Изменять мы ее не будем, нас ведь интересует использование картинок только для нашей темы, неизвестно как эти картинки будут смотреться на всех остальных. Добавим новую функцию в начало темы:

 

function showsublinks_images($sep="&middot;",$class="") {
   $linkimage = array(
      'Главная' => 'index.png',
      'Форум' => 'forum.png',
      'Контакты' => 'contact.png'
   );
 $i = 0; $res = "";
 $sres = dbquery("SELECT * FROM ".DB_PREFIX."site_links WHERE link_position>='2' ORDER BY link_order");
 if (dbrows($sres) != 0) }{
  while($sdata = dbarray($sres)) }{
   if (checkgroup($sdata['link_visibility'])) }{
    if ($sdata['link_url']!="---") }{
     if ($i != 0) }{ $res .= " ".$sep."n"; } else { $res .= "n"; }
     $link_target = $sdata['link_window'] == "1" ? " target='_blank'" : "";
     $link_class = $class ? " class='$class'" : "";
     $sdata['link_name'] = (isset($linkimage[$sdata['link_name']]) ? "<img src='".IMAGES.'menu/" . $linkimage[$sdata['link_name']] . "' alt='" . $linkimage[$sdata['link_name'] . "' /> : $linkimage[$sdata['link_name']]);
     if (strstr($sdata['link_url'], "http://") || strstr($sdata['link_url'], "https://")) {
      $res .= "<a href='".$sdata['link_url']."'" . $link_target . $link_class . ">" . $sdata['link_name'] . "</a>";
     } else {
      $res .= "<a href='".BASEDIR.$sdata['link_url']."'" . $link_target . $link_class . ">" . $sdata['link_name'] . "</a>";
     }
    }
    $i++;
   }
  }
 }
 if ($i != 0) { return $res; } else { return "&nbsp;"; }
}

Перечислим в массиве все картинки для меню:

   $linkimage = array(
      'Главная' => 'index.png',
      'Форум' => 'forum.png',
      'Контакты' => 'contact.png'
   );

Теперь при выводе ссылок, если текст ссылки будет совпадать с ключем массива $linkimage, то он будет заменяться соответствующим изображением из папки /images/menu/

Осталось в функции render_header заменить строчку

<td class='sub-header'>".showsublinks("&middot;","white")."</td>

на

<td class='sub-header'>".showsublinks_images("&middot;","white")."</td>