Hallo
Es klappt immer noch nicht aber danke das du es
fersucht hast ich glaube ich gebe es auf mir eine seite zu bauen :-(
Nicht so schnell die Flinte ins Korn werfen, es ist noch kein Meister vom Himmel gefallen!
Hier ein paar Tipps:
Lagere dein Stylesheet in eine separate Datei aus und binde es mit folgendem HTML-Tag im Header ein:
<link rel="stylesheet" type="text/css" href="style.css">
Das macht den Code übersichtlicher!
Bilder evtl. in ein Extra-Verzeichnis (z.B. img).
Das macht einen aufgeräumteren Eindruck des Verzeichnisses.
Den JavaScript als HTML-Kommentar kennzeichnen:
(Es ist zwar kein Fehler, aber Browser, die kein JS unterstützen zeigen den Code sonst an!)
<script type="text/javascript">
<!--
/* Hier steht der JavaScript Code */
//-->
</script>
Zum MouseOver Button-Effekt:
Du musst ALLE benutzten Bilder für die Knöpfe definieren (aktiv, inaktiv, pressed):
(pressed nur, wenn du eine Änderung bei onClick machen willst)
Startseite_inaktiv = new Image();
Startseite_inaktiv.src = "img/nav_inakt_startseite.png";
Startseite_aktiv = new Image();
Startseite_aktiv.src = "img/nav_akt_startseite.png";
Startseite_pressed = new Image();
Startseite_pressed.src = "img/nav_pressed_startseite.png";
News_inaktiv = new Image();
News_inaktiv.src = "img/nav_inakt_news.png";
News_aktiv = new Image();
News_aktiv.src = "img/nav_akt_news.png";
News_pressed = new Image();
News_pressed.src = "img/nav_pressed_news.png";
[...usw...]
Dann die Funktion swap:
function swap(Bildnr,Bildobjekt)
{
window.document.images[Bildnr].src = Bildobjekt.src;
}
Aufruf für einen Knopf:
<a href="start.html" onFocus="if(this.blur)this.blur()"
onClick="Bildwechsel(1,Startseite_pressed)"
onMouseOver="Bildwechsel(1,Startseite_aktiv)"
onMouseOut ="Bildwechsel(1,Startseite_inaktiv)">
<img src="img/nav_inakt_startseite.png" width=137 height=30 border=0 alt="Startseite"></a>
Die 1 kann evtl auch 2 oder 3 oder... sein.
Für den zweiten Knopf:
<a href="news.html" onFocus="if(this.blur)this.blur()"
onClick="Bildwechsel(2,News_pressed)"
onMouseOver="Bildwechsel(2,News_aktiv)"
onMouseOut ="Bildwechsel(2,News_inaktiv)">
<img src="img/nav_inakt_news.png" width=137 height=30 border=0 alt="News"></a>
Das mit den Zahlen musst du probieren. Die Bilder werden vom Browser einfach nach vorkommen durchnummeriert (ein evtl. vorhandener, vor deinen Knopfbildern definierter Hintergrund wird mitgezählt!).
Das onFocus mit blur verhindert, dass wenn ein grafischer Knopf den Fokus erhält, er einen Rand bekommt. Falls eine Navigation über Tastatur mit Tabulatoren möglich sein soll, diesen Teil auch weglassen. Ist reine Ästhethik.
Hoffe, das hilft...
Kai