Информация взята с Rusff.ru
http://support.rusff.me/viewtopic.php?id=1499
Заменяет ссылки меню навигации на картинки через css
Особенно хорошо то, что форум будет грузиться меньше, если делать это именно через css, а не скриптом.
Идея: Duka
Реализация: Lazary
Назначение: Замена ссылок картинками
Язык: CSS
Работоспособность: IE 6*, 7*, 8 ; Opera 9, 10 ; FF3 ; Safary 3,4 ; Chrome 2,3
Установка: html-верх или css-таблицы собственного стиля.
Преимущества: Нет нагрузки на конечного пользователя, Мгновенное срабатывание, возможность ховера, гибкая настройка

Код:
<style type="text/css">
    /*1. Настройка общего вида линков */
    #pun-navlinks a {
    display: inline-block;
    [color=maroon]height: 20px;[/color]
    [color=green]width: 70px;[/color]
    [color=navy]margin-left: 10px;[/color]
    }
    /*2. Настройка изображений */
    #navindex a {background: url(адрес_изображения) no-repeat top center;}
    #navuserlist a {background: url(адрес_изображения) no-repeat top center;}
    #navsearch a {background: url(адрес_изображения) no-repeat top center;}
    #navprofile a {background: url(адрес_изображения) no-repeat top center;}
    #navpm a {background: url(адрес_изображения) no-repeat top center;}
    #navadmin a {background: url(адрес_изображения) no-repeat top center;}
    #navlogout a {background: url(адрес_изображения) no-repeat top center;}
    #navlogin a {background: url(адрес_изображения) no-repeat top center;}
    #navregister  a {background: url(адрес_изображения) no-repeat top center;}
    /*3. Настройка изображений при ховере (наведении) */
    #navindex a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navuserlist a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navsearch a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navprofile a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navpm a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navadmin a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navlogout a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navlogin a:hover {background: url(адрес_изображения) no-repeat top center;}
    #navregister a:hover {background: url(адрес_изображения) no-repeat top center;}
    /* Скрываем текстовые надписи */
    #pun-navlinks a span {display: none;}
    </style>

Инструкции
1. Настройка общего вида #pun-navlinks a
height: 20px; - укажите высоту ваших изображений
width: 70px; - укажите ширину ваших изображений. Если ширина изображений разная, необходимо удалить эту строку, и указать ширину для каждого элемента отдельно.
Пример:
#navindex a {background: url(адрес_изображения) no-repeat top center; width: 70px; }
#navuserlist a {background: url(адрес_изображения) no-repeat top center; width: 75px;}
и т.д.
! Для ховеров ширину указывать не нужно. Свойство наследуется.
margin-left: 10px; - расстояние между линками.
2. Настройка изображений
#navindex a - Главная
#navuserlist a - Пользователи
#navsearch a - Поиск
#navprofile a - Профиль
#navpm a - ЛС
#navadmin a - Администрирование
#navlogout a - Выход
#navlogin a - Вход
#navregister  a - Регистрация
#navextra1 a - для добавленных ссылок, где цифра, это порядковый номер положения в меню.
background: url(адрес_изображения) - адрес вашего изображения, которое будет отображаться когда ссылка находится в состоянии покоя.
3. Настройка изображений ховера
Все как и выше. Только изображения для ссылок при наведении.