Wenn man eine außergewöhnliche Navigation will, die am besten einen besonderen Font und einen tollen Hover-Effekt hat, kommt man um Bilder als Navigation nicht herum.
Leider ist es aber oft so, dass der Bildwechsel beim Hovern nicht sofort stattfindet, sondern das zweite Bild erst laden muss, oder es wird ein ewig langes, unverständliches JavaScript verwendet, was zur Folge hat, dass nur diejenigen den Bildwechsel sehen, die JavaScript auch aktiviert haben.
Ich stelle hier eine etwas simplere Lösung mit CSS vor.

Bildnavigation? Da brauchen wir erstmal Bilder
Also Photoshop, oder welches Programm auch immer auf machen und die Bilder erstellen.
Und hier haben wir dann auch schon die erste Besonderheit. Denn wir erstellen zwei Bilder in einem. Einmal das Bild, wie es standardmäßig aussehen soll und einmal den Hovereffekt. Die beiden Bilder werden untereinander angeordnet.

Hier ein Beispiel:

Normales Bild:

Hover-Bild:

Zusammen:

Am besten benutzt ihr zum Speichern eurer Bilder den "Für Web speichern"-Dialog. So könnt ihr die Größe der Dateien möglichst gering halten und somit auch die Ladezeit.

Der Code: HTML
Hier gibt es natürlich wieder verschiedene Möglichkeiten, ihr könnt die Links in eine Liste, eine Tabelle, oder was euch sonst noch so einfällt reinschreiben. Manchmal hat das eine Vorteile, manchmal das andere, das müsst ihr abhängig von eurem Layout entscheiden.
Ich benutze der Einfachheit halber eine Liste.

<ul>
<li><a href="blog.html" class="naviblog"></a></li>
<li><a href="aufgaben.html" class="naviaufg"></a></li>
</ul>

Wir erstellen also eine Liste (<ul>), deren Listenpunkte (<li>) jeweils einen Menüpunkt, also einen Link zur enstprechenden Unterseite, enthalten.
Wichtig ist, dass jeder Link eine class erhält, so kann später der CSS-Code auf die einzelnen Links zugreifen.

Code2: CSS
ul li {
list-style-type:none;
float:left;
display:block;
}

a.naviblog, a.naviblog:link, a.naviblog:active, a.naviblog:visited {
width:87px;
height:41px;
background-image:url(′img/blog.jpg′);
background-repeat:no-repeat;
background-position:bottom;
display:block;
outline:none;
}

a.naviblog:hover {
width:87px;
height:41px;
background-image:url(′img/blog.jpg′);
background-repeat:no-repeat;
background-position:top;
display:block;
outline:none;
}

a.naviaufg, a.naviaufg:link, a.naviaufg:active, a.naviaufg:visited {
width:122px;
height:38px;
background-image:url(′img/aufgaben.jpg′);
background-repeat:no-repeat;
background-position:bottom;
display:block;
outline:none;
}

a.naviaufg:hover {
width:122px;
height:38px;
background-image:url(′img/aufgaben.jpg′);
background-repeat:no-repeat;
background-position:top;
display:block;
outline:none;
}

Zuerst bestimmen wir den Style für unserer Listenelemente, die haben normalerweise nämliche Punkte vor dem Inhalt und werden untereinander angeordnet.
Die Punkte vor dem Inhalt entfernen wir mit list-style-type:none, mit float:left werden unsere Listenpunkte nebeneinander angezeigt und mit display:block werden die Listenpunkte zu Blöcken.

Dann kommen die Links. Hier ist zu beachten, wie sie angesprochen werden:
a.klasse:pseudoklasse, also a.naviblog:hover bedeutet, dass die Angaben in den geschweiften Klammern zu den Links gehören, die der Klasse naviblog angehören, wenn sie gehovert werden.

In den geschweiften Klammern folgen die Angaben für die Links, sie sind alle gleich aufgebaut:

width: Länge des Bildes bzw. Länge des Links

height: Hälfte der Höhe des Bildes bzw. Höhe des Links (damit immer nur ein Linkzustand des Bildes angezeigt wird)

background-image: euer Linkbild

background-repeat: Bild wird nicht wiederholt

background-position: wie wird das Bild positioniert. Hier oben (top) oder unten (bottom); wenn es top positioniert wird, sieht man nur den oberen Teil des Bildes, wenn es bottom positioniert ist, sieht man nur den unteren Teil.

display:block: Link wird als Block-Element dargestellt

outline:none: für Firefox, dann wird dieser gepunktete Rahmen beim Draufklicken nicht angezeigt.

Im Endeffekt passiert also folgendes:
Ihr habt ein Link-Bild, dass zwei Linkzustände enthält, dass eine im oberen Teil des Bildes, das andere im unteren.
Durch den CSS-Code wird immer nur ein Teil davon angzeigt, nämlich der, der den Normalzustand des Bildes anzeigt.
Beim Hovern wird die Position des Bildes so verändert, dass genau der andere Teil angezeigt wird.
Dadurch, dass die Linkbilder von Anfang an voll geladen werden, braucht das Hover-Bild nicht nachgeladen werden, wodurch ein fließender Übergang von Normal-Bild zu Hover-Bild beim Hovern entsteht.