Helmut
17.11.2003, 16:44
Hi,
wer seine Seite nicht den ganzen Tag in einem Stil aushalten kann der sollte sich dies einmal ansehen. Hier wird mittels Javascript in verschiedenen Zeiträumen ein anderes CSS Stylesheet geladen.
Ein kompletter Beispielcode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>CSS nach Zeit</title>
<link rel=stylesheet type="text/css" href="standard.css">
<Script Language="JavaScript" type="text/javascript">
var now = new Date()
var h = now.getHours()
if (h < 10)
document.write('<link rel=stylesheet type="text/css" href="cssdatei1.css">')
else if (h < 14)
document.write('<link rel=stylesheet type="text/css" href="cssdatei2.css">')
else if (h < 20)
document.write('<link rel=stylesheet type="text/css" href="cssdatei3.css">')
else
document.write('<link rel=stylesheet type="text/css" href="cssdatei4.css">')
</Script>
</head>
<body>
<table cellspacing="1" cellpadding="0" border="0" class="tabelle">
<tr>
<td colspan="2" class="head">Titel der Tabelle</td>
</tr>
<tr>
<td class="content">Beispieltext 1</td>
<td class="content">Beispieltext 2</td>
</tr>
</table>
</body>
</html>
Wichtig Dabei ist
Ein Standard Stylesheet für Benutzer mit abgeschaltetem Javascript <link rel=stylesheet type="text/css" href="standard.css">
oberhalb der per JS eingebundenen Stylesheets.
Alle Stylesheets müssen gleich aufgebaut sein und sollten sich nur von den zugewiesenen Werten her unterscheiden.
Demo: http://www.inspire-world.de/boarduploads/ZeitCSS/
Download des kompletten Beispieles
http://www.inspire-world.de/boarduploads/ZeitCSS/ZeitCSS.zip
Cu Helmut
wer seine Seite nicht den ganzen Tag in einem Stil aushalten kann der sollte sich dies einmal ansehen. Hier wird mittels Javascript in verschiedenen Zeiträumen ein anderes CSS Stylesheet geladen.
Ein kompletter Beispielcode
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<META http-equiv="Content-Type" content="text/html">
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<title>CSS nach Zeit</title>
<link rel=stylesheet type="text/css" href="standard.css">
<Script Language="JavaScript" type="text/javascript">
var now = new Date()
var h = now.getHours()
if (h < 10)
document.write('<link rel=stylesheet type="text/css" href="cssdatei1.css">')
else if (h < 14)
document.write('<link rel=stylesheet type="text/css" href="cssdatei2.css">')
else if (h < 20)
document.write('<link rel=stylesheet type="text/css" href="cssdatei3.css">')
else
document.write('<link rel=stylesheet type="text/css" href="cssdatei4.css">')
</Script>
</head>
<body>
<table cellspacing="1" cellpadding="0" border="0" class="tabelle">
<tr>
<td colspan="2" class="head">Titel der Tabelle</td>
</tr>
<tr>
<td class="content">Beispieltext 1</td>
<td class="content">Beispieltext 2</td>
</tr>
</table>
</body>
</html>
Wichtig Dabei ist
Ein Standard Stylesheet für Benutzer mit abgeschaltetem Javascript <link rel=stylesheet type="text/css" href="standard.css">
oberhalb der per JS eingebundenen Stylesheets.
Alle Stylesheets müssen gleich aufgebaut sein und sollten sich nur von den zugewiesenen Werten her unterscheiden.
Demo: http://www.inspire-world.de/boarduploads/ZeitCSS/
Download des kompletten Beispieles
http://www.inspire-world.de/boarduploads/ZeitCSS/ZeitCSS.zip
Cu Helmut