time-based image swap?

**longhorn14** · Nov 9, 2003, 20:07

This is sort of a strange question, but here is what I am looking for:
I am designing a site for a radio show, I think it would be cool if I could get an image that says "on air" to display only when the host is on air (10-11, saturdays). Ideally, I would have a normal image with "on air" muted out all the time, except for when the show is on. Anyone have any idea how I might achieve this? Thanks in advance,
nat

**Markdidj** · Nov 9, 2003, 20:48

Code:

date=new Date()
 
day=date.getDay()
hours=date.getHours()
minutes=date.getMinutes()
seconds=date.getSeconds()
 
if((day==n)&&(hours==22)) { change image script }

don't know what days are what numbers, you'll have to create an alert to find out........
if you want it to happen after page has loaded, you'll need to create a setTimeout("checktimefunction()",n) to keep checking the time.

**longhorn14** · Nov 10, 2003, 13:03

Thanks! I will give it a shot. I am not very good with JS, so I may need some more help. Thanks a lot,
nathan

Originally Posted by Markdidj

Code:

date=new Date()
 
day=date.getDay()
hours=date.getHours()
minutes=date.getMinutes()
seconds=date.getSeconds()
 
if((day==n)&&(hours==22)) { change image script }

don't know what days are what numbers, you'll have to create an alert to find out........
if you want it to happen after page has loaded, you'll need to create a setTimeout("checktimefunction()",n) to keep checking the time.

**longhorn14** · Nov 10, 2003, 21:24

Mark:
Thanks for the tip, I was hoping you could point me in the right direction. I have started by just trying to make the script fire an alert to see if all that is straight. Let me know what I am doing wrong. The alert comes up as "undefined".
Here is the snippet:

Code:

<script language="javascript">
function popupMsg(msg) { //v1.0
  alert(msg);

date=new Date()
 
day=date.getDay()
hours=date.getHours()
minutes=date.getMinutes()
seconds=date.getSeconds()
} 

</script>

</head>

<body onLoad="popupMsg()">

Thanks for the help, I am having a bit of trouble with this. Thanks again.

Originally Posted by Markdidj

Code:

date=new Date()
 
day=date.getDay()
hours=date.getHours()
minutes=date.getMinutes()
seconds=date.getSeconds()
 
if((day==n)&&(hours==22)) { change image script }

don't know what days are what numbers, you'll have to create an alert to find out........
if you want it to happen after page has loaded, you'll need to create a setTimeout("checktimefunction()",n) to keep checking the time.

**Markdidj** · Nov 11, 2003, 17:31

Code:

<script language="javascript">
function popupMsg() {
date=new Date();
 day=date.getDay();
hours=date.getHours();
minutes=date.getMinutes();
seconds=date.getSeconds();

alert("Date="+date+"\n Day="+day+"\n Hours="+hours+"\n Minutes="+minutes+"\n Seconds="+seconds);
} 

</script>

</head>

<body onLoad="popupMsg()">

Try that above. You can only alert the output when it has been calculated, so it'll need to go at the end of the function.

**adios** · Nov 12, 2003, 11:10

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
</head>
<body bgcolor="#cc1028">
<img style="float:left;" name="aircheck" width="137" height="28" border="0" src="pixel.gif">
<script type="text/javascript" language="javascript">

	var today = new Date();
	var is_Saturday = (today.getDay() == 6);
	var is_ten_to_eleven = (today.getHours() == 22);
	if (is_Saturday && is_ten_to_eleven) 
		document.images.aircheck.src = 'http://www.ksfo560.com/images/both_onair.gif';

</script>
<strong style="color:#fff;">Your host: </strong>
<img style="float:left;border:1px #fff dashed;" src="http://www.n-link.com/~autograph/box13.jpg">
</body>
</html>

Assume you meant 10-11 PM...'pixel.gif' is the usual, single-pixel transparency.

**Zoef** · Nov 12, 2003, 13:05

Just thought I'd point out that since javascript (in which I am no specialist) is client side scripting this will only be correct as long as the site visitor is in the same timezone as the radio station.

Rik

**longhorn14** · Nov 13, 2003, 13:41

Hey, thanks! You guys have helped a ton.

Originally Posted by adios

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" 
    "http://www.w3.org/TR/html4/loose.dtd">

<html>
<head>
<title>untitled</title>
</head>
<body bgcolor="#cc1028">
<img style="float:left;" name="aircheck" width="137" height="28" border="0" src="pixel.gif">
<script type="text/javascript" language="javascript">

	var today = new Date();
	var is_Saturday = (today.getDay() == 6);
	var is_ten_to_eleven = (today.getHours() == 22);
	if (is_Saturday && is_ten_to_eleven) 
		document.images.aircheck.src = 'http://www.ksfo560.com/images/both_onair.gif';

</script>
<strong style="color:#fff;">Your host: </strong>
<img style="float:left;border:1px #fff dashed;" src="http://www.n-link.com/~autograph/box13.jpg">
</body>
</html>

Assume you meant 10-11 PM...'pixel.gif' is the usual, single-pixel transparency.

**adios** · Nov 13, 2003, 13:46

Zoef is right, though...

I'll get back to you on this (unless somebody who's good with dates does first).

The SitePoint Forums have moved.

User Tag List

Thread: time-based image swap?

Thread Tools

Display

time-based image swap?

Bookmarks

Bookmarks

Posting Permissions