Die Navigation von dracoblue.net habe ich mit CSS-Background Bildern und einem :hover-effect gemacht. Beim Hovern, wird das Bild dann einfach in einer etwas helleren Version zeigt.

Es gibt also:

1
http://dracoblue.net/style/menu_news_hover.png

und

1
http://dracoblue.net/style/menu_news.png

In meinem CSS, sieht das dann so aus:

1
2
3
4
5
6
a#newsLink {
background: transparent url('menu_news.png') no-repeat;
}
a#newsLink:hover {
background: transparent url('menu_news_hover.png') no-repeat;
}

All dass ist natürlich gängige Praxis, aber ich hatte damit ein Usability-Problem für meine Benutzer. Die *hover.png Dateien werden erst geladen, sobald man mit der Maus über den Navigationseintrag geht, ihn also hover't. In der Perspektive des Serverbesitzers, ist man darüber vielleicht froh. Aber für den Benutzer, ist das neue (hellere) Bild, für knapp eine Sekunde nicht verfügbar. Es dauert ja ein bisschen, bis das Bild vom Server zum User kommt.

Hier nun meine Lösung, woe man die Bilder vorlädt (ohne Javascript oder stub-<img>'s zu benutzen).

1
2
3
4
5
6
7
8
9
10
11
12
13
td#newsLink a {
background: transparent url('menu_news.png') no-repeat;
}
td#newsLink a:hover {
background: transparent url('menu_news_hover.png') no-repeat;
}
td#newsLink {
background:
transparent
url('menu_news_hover.png')
fixed no-repeat
-120px -120px;
}

In dem Beispiel habe ich das #newsLink auf das td des eigentlichen Links verschoben. Abschließend, habe ich eine neue Definition eingefügt, die ein sich nicht-wiederholendes und - mit Koordinaten -120x-120 - eindeutig unsichtbares Bild anzeigt.