Changing Images based on Time

If you ever used Google's iGoogle feature, you may have noticed that depending on the hour, the background changes. Using JavaScript we can create the same feature, which will rotate an image based on the time that the the user visits.
Here are the three images that we are going to be using.

<script language="JavaScript" type="text/javascript">
 var now = new Date();
 var hour = now.getHours();

 if (hour <=11){
	var TimeofDay = ""
 }else if(hour > 11 && hour <= 17){
	var TimeofDay = ""
 }else if(hour > 17){
	var TimeofDay = ""
 }
</script>

<script>
	document.write(TimeofDay)
</script>

The first thing we need to do in our script is to find what hour it currently is. We used the Date() function to do this. This is nothing that we have not seen already in earlier tutorials. We are then going to use two functions to determine what image to display. In our script we will have any time before 11 to display a sunrise, any time between 12 to 17 to display the afternoon image, and any time greater then 17 to show our night sky image. Later in the body, when we want to display the image we use the document.write, and pass the TimeofDay to it. Below is an example of the code in action.