|
Rollover-Effekt erzeugen:
|
|
|
|
Nun funktionieren die Tabs bereits als Navigation, aber der optische Effekt fehlt noch. Den erzeugen wir nun wie folgt.
Den Tabs wird nun mittels eines Codeschnipsels der Rollovereffekt verpasst. Ähnlich wie beim Verlinken, wird diese Funktion auf
jeder Seite nur den inaktiven Tabs zugewiesen.
Hierzu bereitet man sich am besten den Code im Editor vor, damit man dann auf den Einzelnen Seiten nur kopieren und einfügen muss.
|
|
Für diese Seite würde der vorbereitete Code wie folgt aussehen:
|
|
onMouseover="navi1.src='../assets/images/navi/Schritt1&2_on.gif';"
onMouseout="navi1.src='../assets/images/navi/Schritt1&2_off.gif';"
name="navi1"
|
Code für Schaltläche: “Schritt 1 & 2”
|
|
onMouseover="navi2.src='../assets/images/navi/Schritt3_on.gif';"
onMouseout="navi2.src='../assets/images/navi/Schritt3_off.gif';"
name="navi2"
|
Code für Schaltläche: “Schritt 3”
|
|
onMouseover="navi3.src='../assets/images/navi/Schritt4_on.gif';"
onMouseout="navi3.src='../assets/images/navi/Schritt4_off.gif';"
name="navi3"
|
Code für Schaltläche: “Schritt 4”
|
|
onMouseover="navi4.src='../assets/images/navi/Schritt5_on.gif';"
onMouseout="navi4.src='../assets/images/navi/Schritt5_off.gif';"
name="navi4"
|
Code für Schaltläche: “Schritt 5”
|
|
|
|
Selbstverständlich müsst ihr den Code an eure Tab-Grafiken anpassen. Sprich, die Bezeichnung eurer Schaltflächengrafik im rot
markierten Bereich einsetzen.
Achtung!!! Solltet Ihr die Navi auf der Home einsetzen, dann müsst ihr den Code für diese eine Seite ändern indem ihr den rot markierten Bereich aus dem Code löscht.
|
|
onMouseover="navi1.src='../assets/images/navi/Schritt1&2_on.gif';"
onMouseout="navi1.src='../assets/images/navi/Schritt1&2_off.gif';"
name="navi1"
|
|
Wichtig ist ausserdem, dass die Schaltflächen durchnummeriert werden. Solltet ihr also mehr als 4 Tabs in eurer Navi haben,
muss der Code für die weiteren Tabs dann mit “5-6-7” etc. fortgesetzt werden.
Wie und wo dieser Code nun eingefügt wird, seht ihr unter Schritt 5.
|
