Forum Moderators: open

Message Too Old, No Replies

Different link depending on time of day

         

inarbeth

3:28 pm on Apr 4, 2004 (gmt 0)

10+ Year Member



I want to attach links to a jpg image so that depending on the time of day when the user clicks on it the link takes them to a different URL. I have found code for this with text but my programming skills are not that good.

Suppose my image description is src="Directory/PictureName_small.JPG" and I want to redirect to www.google.com if the time is before 12, to www.lycos.com if between 12 and 18 hours and to www.yahoo.com otherwise, what is the code please?

birdbrain

7:17 pm on Apr 4, 2004 (gmt 0)



Hi there inarbeth,

Try this...


<!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">
<head>
<title>Link Changer</title>
<meta http-equiv="Content-Type" content="application/xhtml+xml; charset=utf-8" />
<script type="text/javascript">
//<![CDATA[
function linkChange(){
var google='<a href="http://www.google.com/"><img src="your_image.jpg" alt=""/></a>';
var lycos='<a href="http://www.lycos.com/"><img src="your_image.jpg" alt=""/></a>';
var yahoo='<a href="http://www.yahoo.com/"><img src="your_image.jpg" alt=""/></a>';
var today=new Date();
var hour=today.getHours();

if((hour>0) && (hour<=12)){
document.getElementById("foo").innerHTML=google;
}
else if((hour>12) && (hour<=18)){
document.getElementById("foo").innerHTML=lycos;
}
else if((hour>18) && (hour<=23)){
document.getElementById("foo").innerHTML=yahoo;
}
}
//]]>
</script>
</head>
<body onload="linkChange()">
<div id="foo">
</div>
</body>
</html>

;) ;)

birdbrain

Purple Martin

10:59 pm on Apr 4, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



JavaScript is a good way to do this, but not a great way - because some people have JavaScript turned off. The great way to do this would be to use server-side scripting to serve a page with different links at different times of day.

Rambo Tribble

5:56 am on Apr 5, 2004 (gmt 0)

WebmasterWorld Senior Member 10+ Year Member



Additionally, supporting Purple Martin's thesis, many users don't have the clocks set correctly on their PC's.

Which brings up the question of what time is what. Is it 12:00 server time, PST, Greenwich Mean?

inarbeth

8:46 am on Apr 5, 2004 (gmt 0)

10+ Year Member



Thanks birdbrain, Purple Martin and Rambo Tribble - the code is great. I'm not unduly worried about the clock setting - I just want viewers to get a different link depending on the time of day and so if their clocks are wrong it won't matter much. Is there a way to check if a user has javascript turned off and to provide the picture with say just one link?

ajkimoto

2:49 pm on Apr 5, 2004 (gmt 0)

10+ Year Member



inarbeth,

You can't really use js to check to see if the user has js turned off, but you can use a combo of css and js to show/hide page elements--if js enabled, hide the jsDisabledDiv and show the jsEnabledDiv.

<script type="text/javascript">
<!--
//only fires if js enabled
function jsCheck(){
//hide jsDisabledDiv
document.getElementById('jsDisabledDiv').style.display="none"
//show jsEnabledDiv
document.getElementById('jsEnabledDiv').style.display="block"
}

//-->
</script>
<body onload="jsCheck()">
<!--jsDisabledDiv visible by default//-->
<div id="jsDisabledDiv">
blah...
</div>
<!--jsEnabledDiv hidden by default//-->
<div id="jsEnabledDiv" style="display:none">
blah...
</div>

ajkimoto