Суть - слова из навигации (форум, участники и т.д.) меняем на картинки, а при наведении на одну из картинок она, в свою очередь, ещё раз меняется.
Вставлять в хтмл-низ (Если используем скрипт информирующий о новых сообщениях, ставим его раньше данного скрипта)

Код:
    <script><!--Свои картинки в панель навигации со сменой картинки по наведению курсора" -->
       navlinks=new Array(

      "navextra1",    // Дополнительный пункт меню 1
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navextra2",    // Дополнительный пункт меню 2
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navextra3",    // Дополнительный пункт меню 3
    "Ссылка на картинку","Ссылка на картинку при наведении",

      "navindex",    // Форум
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navuserlist", // Участники
    "Ссылка на картинку","Ссылка на картинку при наведении",
    "navrules",    // Правила
    "Ссылка на картинку","Ссылка на картинку при наведении",
    "navsearch",    // Поиск
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navprofile",    // Профиль
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navpm",    // Сообщения
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navadmin",    // Администрирование
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navregister", // Регистрация
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navlogin",    // Войти
    "Ссылка на картинку","Ссылка на картинку при наведении",
      "navlogout",    // Выход
    "Ссылка на картинку","Ссылка на картинку при наведении"  // !ПОСЛЕДНИЙ элемент без запятой
    )
    var s0,s1,s2,s3,i; for (i=0; i < navlinks.length; i++){s0=navlinks[i+1];s1="onmouseover=\"this.src='"+navlinks[i+2]+"'\""; s2="onmouseout=\"this.src='"+s0+"'\"";s3='<img class="navlinks" src="'+s0+'" '+s1+' '+s2+' border="0" />';$("#"+navlinks[i]+" a").html("<span>"+s3+"</span>");i++;i++; }
    </script>