Welcome to WebmasterWorld Guest from

Forum Moderators: open

Message Too Old, No Replies

js help needed

image changing by time of day



8:46 pm on Jan 5, 2004 (gmt 0)

Inactive Member
Account Expired


I'm not very smart on javascript, but I'm trying to get an image on my main page to change depending on the time of day. I found a script for it in another posting, but I don't know how to use it. The following is the code.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<title>Untitled Document</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css">
<SCRIPT LANGUAGE = 'JavaScript'><!--
var date = new Date();

var time = date.getHours();

if (time<12) {document.write("<IMG SRC='Images/baldy_web.jpg width="590" height="259" border="0"'>")
else if (time<16) {document.write("<IMG SRC='Images/golf_web.jpg width="590" height="259" border="0"'>")
else if (time<20) {document.write("<IMG SRC='Images/riverrun_web.jpg width="590" height="259" border="0"'>")
else {document.write("<IMG SRC='Images/historic_web.jpb width="590" height="259" border="0"'>");



<table width="100%" border="0">
<td height="31" colspan="3">
<h3><marquee direction="left">Visiting Sun Valley? Check out the following web pages for more information<a href="http://www.sunvalley.com" target="_blank"> www.sunvalley.com</a> and <a href="http://www.ypcity.com" target="_blank">www.ypcity.com</a></marquee></h3></td>
<td width="22%" height="299"> <h5>Looking for High-Speed Internet access while
enjoying the beautiful Sun Valley area?</h5>
<h5>Call us today!</h5></td>
<td width="17%"><h5>Forgot your network card? Don't worry, we'll rent you one
while your visiting!</h5></td>

11:16 pm on Jan 5, 2004 (gmt 0)

New User

10+ Year Member

joined:Dec 11, 2003
votes: 0

Hi Fencer, if you move the <script>...</script> section to where you indicate that the script needs to execute, it will execute there. JavaScript that is in the body of a page executes as it happens. I am assuming that the image sources and settings are yours already.
12:51 am on Jan 6, 2004 (gmt 0)

Junior Member

10+ Year Member

joined:June 19, 2003
votes: 0

yes, TrinkDawg is correct. To elaborate a bit, you can easily inspect your jscript example and follow the logic and see the simple html in action:
- if the time is a certain value,
- print the corresponding familiar html <img> tag corresponding to the image you want

Essentially, you'll be using javascript here to dynamically write HTML to the client browser instead of just feeding the browser hardcoded html.