<!--[if IE 6]>
        <link rel="stylesheet" href="format_ie_6.css" type="text/css" charset="utf-8" />
    <![endif]-->
<!--[if IE 7]>
        <link rel="stylesheet" href="format_ie_7.css" type="text/css" charset="utf-8" />
    <![endif]-->
<!--[if gte IE 8]>
        <link rel="stylesheet" href="format_ie_8.css" type="text/css" charset="utf-8" />
    <![endif]-->
	
	onLoad="alert('hello world!')"
	
	
	
	/*function BilderVorladen()
{
    ampelbilder = new Array();

    if(document.images){

            links = new Image();
            links.src = "bilder/rot.jpg";

            ampelbilder[1] = new Image();
            ampelbilder[1].src = "bilder/rotgelb.jpg";

            ampelbilder[2] = new Image();
            ampelbilder[2].src = "bilder/gelb.jpg";

            ampelbilder[3] = new Image();
            ampelbilder[3].src = "bilder/gruen.jpg";

            ampelbilder[4] = new Image();
            ampelbilder[4].src = "bilder/fussrot.jpg";

            ampelbilder[5] = new Image();
            ampelbilder[5].src = "bilder/fussgruen.jpg";
    }
}
   BilderVorladen(),

  */
  
  
  zaehlertag(); 
  
  
  
  
  
  
  -----------------------------------------
  
  
  
  
   <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head  scrolling="no">
	<title>Ampelschaltung</title>
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
	
	<link rel="stylesheet" href="format.css" />
	
	<!--[if lte IE 6]>
        <style type="text/css">@import url(format_ie_6.css);</style>
		<script language="JavaScript" type="text/javascript" onLoad="alert()">
		alert("Achtung! Diese Website ist fuer aktuelle Browser optimiert, das heisst es kann in ihrem Browser zu Fehlern in der Darstellung kommen. Wir empfehlen, auf den aktuellen Internet Explorer zu updaten, oder den aktuellen Mozilla Firefox zu verwenden.");
		</script>
    <![endif]-->
	
	<!--[if IE 7]>
        <style type="text/css">@import url(format_ie_7.css);</style>
		<script language="JavaScript" type="text/javascript" onLoad="alert()">
		alert("Achtung! Diese Website ist fuer aktuelle Browser optimiert, das heisst es kann in ihrem Browser zu Fehlern in der Darstellung kommen. Wir empfehlen, auf den aktuellen Internet Explorer zu updaten, oder den aktuellen Mozilla Firefox zu verwenden.");
		</script>
    <![endif]-->
	
	<!--[if gte IE 8]>
        <style type="text/css">@import url(format_ie_8.css);</style>
    <![endif]-->
	
	
      
	<script language="JavaScript" type="text/javascript">
<!--


function bilder_laden(){  
	links = new Image();
	links.src = "bilder/rot_links.jpg";

	oben = new Image();
	oben.src = "bilder/rot_oben.jpg";

	rechts = new Image();
	rechts.src = "bilder/rot_rechts.jpg";

	unten = new Image();
	unten.src = "bilder/rot_unten.jpg";  
}
  
var x=19;
var tagTimer;
var nachtTimer;
var ausTimer;

function zaehlertag()
{
  window.clearTimeout(nachtTimer);
  window.clearTimeout(ausTimer);
  x = x + 1;  
  //links
  if(x==20) {document.links.src="bilder/rot_links.jpg";}
  if(x==23) {document.links.src="bilder/rot_links.jpg";}
  if(x==24) {document.links.src="bilder/rot_links.jpg";}
  if(x==30) {document.links.src="bilder/rot_links.jpg";}
  if(x==32) {document.links.src="bilder/rot_links.jpg";}
  if(x==34) {document.links.src="bilder/rotgelb_links.jpg";}
  if(x==35) {document.links.src="bilder/gruen_links.jpg";}
  if(x==44) {document.links.src="bilder/gelb_links.jpg";}
  
  //rechts
  if(x==20) {document.rechts.src="bilder/rot_rechts.jpg";}
  if(x==23) {document.rechts.src="bilder/rot_rechts.jpg";}
  if(x==24) {document.rechts.src="bilder/rot_rechts.jpg";}
  if(x==30) {document.rechts.src="bilder/rot_rechts.jpg";}
  if(x==32) {document.rechts.src="bilder/rot_rechts.jpg";}
  if(x==34) {document.rechts.src="bilder/rotgelb_rechts.jpg";}
  if(x==35) {document.rechts.src="bilder/gruen_rechts.jpg";}
  if(x==44) {document.rechts.src="bilder/gelb_rechts.jpg";}
  
  //oben
  if(x==20) {document.oben.src="bilder/rot_oben.jpg";}
  if(x==23) {document.oben.src="bilder/rotgelb_oben.jpg";}
  if(x==24) {document.oben.src="bilder/gruen_oben.jpg";}
  if(x==30) {document.oben.src="bilder/gelb_oben.jpg";}
  if(x==32) {document.oben.src="bilder/rot_oben.jpg";}
  if(x==34) {document.oben.src="bilder/rot_oben.jpg";}
  if(x==35) {document.oben.src="bilder/rot_oben.jpg";}
  if(x==44) {document.oben.src="bilder/rot_oben.jpg";}
  
  //unten
  if(x==20) {document.unten.src="bilder/rot_unten.jpg";}
  if(x==23) {document.unten.src="bilder/rotgelb_unten.jpg";}
  if(x==24) {document.unten.src="bilder/gruen_unten.jpg";}
  if(x==30) {document.unten.src="bilder/gelb_unten.jpg";}
  if(x==32) {document.unten.src="bilder/rot_unten.jpg";}
  if(x==34) {document.unten.src="bilder/rot_unten.jpg";}
  if(x==35) {document.unten.src="bilder/rot_unten.jpg";}
  if(x==44) {document.unten.src="bilder/rot_unten.jpg";}
  
  if(x==46) {x=19;} 
  tagTimer = window.setTimeout("zaehlertag()", 500);

}

function zaehlernacht()
{
  window.clearTimeout(tagTimer);
  window.clearTimeout(ausTimer);
  x = x + 1;  
  //links
  if(x==20) {document.links.src="bilder/rot_links.jpg";}
  if(x==23) {document.links.src="bilder/rot_links.jpg";}
  if(x==24) {document.links.src="bilder/rot_links.jpg";}
  if(x==30) {document.links.src="bilder/rot_links.jpg";}
  if(x==32) {document.links.src="bilder/rot_links.jpg";}
  if(x==34) {document.links.src="bilder/rotgelb_links.jpg";}
  if(x==35) {document.links.src="bilder/gruen_links.jpg";}
  if(x==44) {document.links.src="bilder/gelb_links.jpg";}
  
  //rechts
  if(x==20) {document.rechts.src="bilder/rot_rechts.jpg";}
  if(x==23) {document.rechts.src="bilder/rot_rechts.jpg";}
  if(x==24) {document.rechts.src="bilder/rot_rechts.jpg";}
  if(x==30) {document.rechts.src="bilder/rot_rechts.jpg";}
  if(x==32) {document.rechts.src="bilder/rot_rechts.jpg";}
  if(x==34) {document.rechts.src="bilder/rotgelb_rechts.jpg";}
  if(x==35) {document.rechts.src="bilder/gruen_rechts.jpg";}
  if(x==44) {document.rechts.src="bilder/gelb_rechts.jpg";}
  
  //oben
  if(x==20) {document.oben.src="bilder/rot_oben.jpg";}
  if(x==23) {document.oben.src="bilder/rotgelb_oben.jpg";}
  if(x==24) {document.oben.src="bilder/gruen_oben.jpg";}
  if(x==30) {document.oben.src="bilder/gelb_oben.jpg";}
  if(x==32) {document.oben.src="bilder/rot_oben.jpg";}
  if(x==34) {document.oben.src="bilder/rot_oben.jpg";}
  if(x==35) {document.oben.src="bilder/rot_oben.jpg";}
  if(x==44) {document.oben.src="bilder/rot_oben.jpg";}
  
  //unten
  if(x==20) {document.unten.src="bilder/rot_unten.jpg";}
  if(x==23) {document.unten.src="bilder/rotgelb_unten.jpg";}
  if(x==24) {document.unten.src="bilder/gruen_unten.jpg";}
  if(x==30) {document.unten.src="bilder/gelb_unten.jpg";}
  if(x==32) {document.unten.src="bilder/rot_unten.jpg";}
  if(x==34) {document.unten.src="bilder/rot_unten.jpg";}
  if(x==35) {document.unten.src="bilder/rot_unten.jpg";}
  if(x==44) {document.unten.src="bilder/rot_unten.jpg";}
  
  if(x==46) {x=19;} 
  nachtTimer = window.setTimeout("zaehlernacht()", 1500);

}

function zaehleraus()
{ 
  window.clearTimeout(tagTimer);
  window.clearTimeout(nachtTimer);
  x = x + 1;  
  //links
  if(x==20) {document.links.src="bilder/aus_links.jpg";}
  if(x==21) {document.links.src="bilder/gelb_links.jpg";}
  
  //rechts
  if(x==20) {document.rechts.src="bilder/aus_rechts.jpg";}
  if(x==21) {document.rechts.src="bilder/gelb_rechts.jpg";}
  
  //oben
  if(x==20) {document.oben.src="bilder/aus_oben.jpg";}
  if(x==21) {document.oben.src="bilder/gelb_oben.jpg";}
  
  //unten
  if(x==20) {document.unten.src="bilder/aus_unten.jpg";}
  if(x==21) {document.unten.src="bilder/gelb_unten.jpg";}
  
  if(x==21) {x=19;} 
  ausTimer = window.setTimeout("zaehleraus()", 400);

}

//-->
</script>


</head>
<body onload="bilder_laden();" scrolling="no">

  <div id="bg">
  <img src="bilder/strasse.jpg" width="1" height="1" alt="Bildhintergrund" id="hintergrund" />
  </div>
  <div id="tabelle">
  <table border="0" cellspacing="0" cellpadding="0">
  
 <tr> <!-- Zeile 1 //-->
  <td></td>
  <td></td>
  <td><div id="oben"><img height="50%" style="position: absolute; bottom: 2em; left: 2.5em;" name="oben" src="bilder/rot_oben.jpg"></div></td>
  <td></td>
  <td> <div id="auswahl"> 
	<form>
	<select NAME="list" size="3">
		<option onclick="zaehlertag()"> Tagschaltung </option>
		<option onclick="zaehlernacht()"> Nachtschaltung </option>
		<option onclick="zaehleraus()"> Ausgeschaltet </option>
	</select>
	</form>
  </div> </td>
 </tr>
 
 <tr> <!-- Zeile 2 //-->
  <td></td>
  <td></td>
  <td></td>
  <td><div id="rechts"><img style="position: absolute; bottom: 1em; right: 0em;" name="rechts" src="bilder/rot_rechts.jpg"></div></td> <!--  style="position:absolute; bottom:0px; right:0px" //-->
  <td></td>
 </tr>
 
 <tr> <!-- Zeile 3 //-->
  <td></td>
  <td></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 
 <tr> <!-- Zeile 4 //-->
  <td></td>
  <td><div id="links"><img style="position: absolute; top: 1em; left: 0;" name="links" src="bilder/rot_links.jpg"></div></td>
  <td></td>
  <td></td>
  <td></td>
 </tr>
 
 <tr> <!-- Zeile 5 //-->
  <td></td>
  <td></td>
  <td><div id="unten"><img style="position: absolute; top: 2.5em; right: 3em;" align="right" name="unten" src="bilder/rot_unten.jpg"></div></td>
  <td></td>
  <td></td>
 </tr>
</table>
</div>
</body>
</html>