Информация взята: http://support.rusff.me/viewtopic.php?id=1499
Особенности: Особенно хорошо то, что форум будет грузиться меньше, если делать это именно через css, а не скриптом.
Идея: Duka
Реализация: Lazary
Назначение: Замена ссылок картинками
Работоспособность: 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;
    height: 20px;
    width: 70px;
    margin-left: 10px;
    }
    /*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>

height: 20px; - высота ваших изображений
width: 70px; - ширина ваших изображений. Если ширина изображений разная, необходимо удалить эту строку, и указать ширину для каждого элемента отдельно. ! Для ховеров ширину указывать не нужно. Свойство наследуется.
margin-left: 10px; - расстояние между линками.

#navindex a - Главная
#navuserlist a - Пользователи
#navsearch a - Поиск
#navprofile a - Профиль
#navpm a - ЛС
#navadmin a - Администрирование
#navlogout a - Выход
#navlogin a - Вход
#navregister  a - Регистрация
#navextra1 a - для добавленных ссылок, где цифра, это порядковый номер положения в меню.
background: url(адрес_изображения) - адрес вашего изображения, которое будет отображаться когда ссылка находится в состоянии покоя.