Style Switcher für die Knuddels-Homepage

"Soll meine Homepage lieber hell oder dunkel aussehen?"
Diese Frage stellen sich viele Leute beim Erstellen der eigenen Homepage.
Doch mit dem StyleSwitcher kannst du mehrere Styles auf deine Knuddelshomepage bringen.
_______________________________________________________

Was wird benötigt?
  • TextEditor (z.B. Notepad++)
  • Browser, welcher alle CSS-Elemente korrekt darstellt, um eure Ergebnisse auszuprobieren. ;-)
  • Webspace, auf dem die CSS-Datein gespeichert werden (z.B. Square7.ch)

_______________________________________________________

Welche Kenntnisse müssen vorhanden sein?
  • HTML (mindestens: Einbindung von externen CSS-Datein)
  • CSS, damit der StyleSwitcher einen Sinn macht. ;-)

_______________________________________________________

Sourcecode
Code #1 - JavaScript:
Code:
<script type="text/javascript">
/* Dieses Script nicht verändern! */
function switchStyle(sheet)
{
	document.getElementById('myStyle').removeAttribute('href');   
	document.getElementById('myStyle').setAttribute('href', sheet); 
}
</script>

Das Script ersetzt das alte StyleSheet durch das neue, indem es den Link im nächsten Code ersetzt:
Code #2 - HTML:
Html:
<link href="style.css" rel="stylesheet" type="text/css" id="myStyle">
Mit diesem Code wird der Standardstyle festgelegt, der beim Laden der Seite erscheint.<br>Außerdem wird in diesem Code, durch das Script, der Link zum StyleSheet geändert.
Code #3 - HTML:
Html:
<a href="#" onclick="switchStyle('style1.css'); return false;">Style1</a> 
<a href="#" onclick="switchStyle('style2.css'); return false;">Style2</a>
Die Links rufen die Funktion unseres JavaScriptes (switchStyle) auf.
In den Klammern muss die Adresse zu den Links stehen (Beispiel: http://www.euerhoster.de/css/style1.css)
_______________________________________________________
Erklärungen zu den Codes: Solltest du noch Fragen zu den Codes haben, stelle sie im Sammelthread oder schreibe eine /m an mich.
Beispielseite: iSascha.square7.ch
Hinweise: Der Sourcecode stammt nicht von mir selbst, sondern von hier.

Natürlich gibt es noch viele andere Möglichkeiten (z.B. mit Cookies, etc.) dies zu realisieren, aber diese ist m.M.n. die einfachste.