Ich habe mal ein paar Seitenfragmente erstellt, die es einfach ermöglichen, eine Navigation mit Mouse-Over-Effekt und preloaded Image zu erstellen.
Im Head steht folgendes:
<script type=text/javascript>
function PreloadImage(name) {
MyImage = new Image();
MyImage.src=name;
}
</script>
<style type="text/css">
.nav {
float:left;
width:150px;
}
.nav a {
display:block;
background-image:url("image1.png");
background-color:transparent;
color:black;
}
.nav a:hover {
display:block;
background-image:url("image2.png");
background-color:transparent;
color:black;
}
</style>Praktisch wäre es nun, wenn euer Webhoster SSI (Server Side Includes) unterstützt. Dann müsst ihr nicht die Navigation in jede Seite einfügen.
Zur Nutzung von SSI erstellt ihr nun eine datei namens "nav.inc", die sieht so aus:
<div class="nav">
[url='seite1.shtml']Seite 1[/url]
[url='seite2.shtml']Seite 2[/url]
[url='seite3.shtml']Seite 3[/url]
[url='seite4.shtml']Seite 4[/url]
</div>So sieht nun der Body der HTML-Datei aus:
<body onload="PreloadImages(image2.png)">
<div>
Hier steht nun der jeweilige Seitencontent
</div>
</body>Das ist im Prinzip alles. Da image1.png schon beim Start angezeigt werden soll, muss es nicht explizit vorgeladen werden. Eure Seiten müssen, wenn die Navigation angezeigt werden soll, die endung shtml statt html haben, die Startseite heißt dann "index.shtml".
Der SSI-Befehl "include virtual="...." unterstützt nur relative Adressen, wer mit absoluten Adressen arbeiten will, verwendet folgenden SSI-Befehl:
Viel Spaß beim Experimentieren. Insbesondere im CSS könnt ihr viel rumbasteln, z.B. Schriftgröße und -farbe, Breite der Navigation etc.
Stefan