Hi Leute!
Weihnachten 2002 war mir langweilig und daher habe ich damals eine Navigation für meine Site gebastelt, die einen speziellen Hover-Effekt verwendet: Der Hintergrund des jeweiligen Items blendet von rot nach schwarz (andere Farben sind auch möglich).
In diesem Tutorial möchte ich euch erklären, wie ihr euch so eine Navigation selber bastelt.
Ich habe diese Navigation in vielen Browsern getestet; nur im Konqueror gab es mit dem Effekt Probleme, aber die Links funktionierten trotzdem.
Zuerst braucht ihr eine Tabelle:
<table border="0" cellspacing="0" cellpadding="0">
Die Attribute border, cellpadding und cellspacing sind für die nahtlosen Übergänge zwischen den einzelnen Elementen wichtig!
Der erste Eintrag im Menü wird so definiert:
<tr class="nav" onmouseover="this.style.backgroundColor='#000'; obj[0]=this;" onclick="location.href='news.html';" onmouseout="changeBack(0,0,16,0);" bgColor="#ff0000"> <td><img src="home.gif"></td> <td class="nav">News</td> </tr>
OK, dass ist ziemlich unübersichtlich. So funktionierts:
Zuerst einmal der CSS-Eintrag class="nav". In der CSS-Datei sieht das so aus:
tr.nav{cursor:pointer}
td.nav{color:#ffffff}
Es werden nur Mauszeiger und Textfarbe definiert, also nichts besonderes.
Im onclick-Teil wird lediglich zur angegebenen Seite gewechselt, bgcolor setzt die entsprechende Hintergrundfarbe.
Im onmouseover-Teil geschehen zwei Dinge:
Die Hintergrundfarbe wird auf schwarz gesetzt (was man ja beim rüberfahren mit der Maus auch sieht)
Element 0 des Arrays obj wird auf dieses tr gesetzt
Das erstere dürfte klar sein; zum zweiten:
Bei onmouseout wird die Funktion changeback aufgerufen. Diese ist in der menu.js definiert. Diese Datei sieht so aus:
var obj, werte;
obj = new Array();
werte = new Array("0","1","2","3","4","5","6","7","8","9","A","B","C","D","E","F");
function changeBack( farbe, n, m, t )
{
if( obj[n] && farbe < m )
{
if( t == 0 ) obj[n].style.backgroundColor="#" + werte[farbe++] + werte[farbe-1] + "0000";
if( t == 1 ) obj[n].style.backgroundColor="#0000" + werte[farbe++] + werte[farbe-1];
setTimeout( "changeBack( " + farbe + ", " + n + ", " + m + ", " + t + " );", 50);
}
}
OK, jetzt wird es interessant. So funktionierts:
Die Funktion changeBack ändert die Hintergrundfarbe langsam wieder von schwarz nach rot (je nachdem). Sie erwartet vier Parameter:
farbe; ein numerischer Wert. Die Hintergrundfarbe wird mit diesem Wert und den entsprechenden Elementen des Arrays werte gebildet. Wenn die Funktion sich dann selbst wieder aufruft (setTimeout) wird vorher farbe + 1 gerechnet und die nächste Hintergrundfarbe ist dann daher heller.
n ist die Nummer der Tabellenzeile, deren Farbe geändert werden soll. Daher auch obj[0] = this; dies ist notwendig, damit von mehreren Tabellenzeilen gleichzeitig die Farbe geändert werden kann. In der 2. Tabellenzeile wäre es dann obj[1] = this; und so weiter.
m gibt an, wie oft die Funktion aufgerufen werden soll. Hier 16mal.
t gibt den Stil an. Bis jetzt sind nur zwei Stile integriert, ihr könnt t also auf 0 oder auf 1 setzen.
Soweit zum technischen. Jetzt zeige ich euch, wie ihr so ein Menü in eure Seite implementiert:
Zuerst macht ihr einen JavaScript wie der von da oben, dann beginnt ihr wie oben angegeben die Tabelle.
Jetzt macht ihr die Einträge in der Navigation:
<tr class="nav" onmouseover="this.style.backgroundColor='#000'; obj[0]=this;" onclick="location.href='seite1.html';" onmouseout="changeBack(0,0,16,0);" bgColor="#ff0000"> <td><img src="home.gif"></td> <td class="nav">Seite1</td> </tr>
<tr class="nav" onmouseover="this.style.backgroundColor='#000'; obj[1]=this;" onclick="location.href='seite2.html';" onmouseout=changeBack(0,1,14,0); bgColor="#dd0000"> <td></td> <td class="nav">Seite2</td> </tr>
...
Der dritte Parameter von changeBack ist immer abhängig von der gewählten Hintergundfarbe:
bgcolor => 3. Parameter bei changeback
#ff0000 => 16
#ee0000 => 15
#dd0000 => 14
#cc0000 => 13
#bb0000 => 12
#aa0000 => 11
#990000 => 10
#880000 => 9
#770000 => 8
#660000 => 7
#550000 => 6
#440000 => 5
#330000 => 4
#220000 => 3
#110000 => 2
#000000 => 1
Wenn der vierte Parameter (t) 0 ist, verändert changeBack nur die ersten zwei Ziffern der Farbe und setzt die anderen auf 0.
Das ergibt dann den schwarz->rot Effekt.
Setzt t auf 1 um den schwarz->blau Effekt zu erhalten.
So, dass war's. Falls ihr noch Fragen habt, könnt ihr mir eine E-Mail schreiben. (Schaut in mein Profil auf lima city).
Außerdem habe ich noch ein paar Tipps:
- Falls ihr Frames benutuzt, solltet ihr das onClick so schreiben: parent.frames[1].location.href='seite.html'; (wobei der Index des Arrays frames natürlich variiert).
- Ihr könnt statt dem onClick auch den Beschreibungstext in einen <a>-Tag einschließen. Dann könnt ihr sicher sein, dass das Menü auch bei Leuten funktioniert, die JavaScript ausgeschaltet haben.