PDA

View Full Version : images shown depending on time of day



riyadh
02-15-2007, 10:20 AM
i'm guessing tht everyone has seen the new Yahoo! Mail Beta. they use this nifty thing in it where the user is greeted by an image depending on the time of day. for example, if i login in the morning according to my computer's clock, they show a 'Good Morning' image and so on. can anyone plz help me with a script like tht? i really need it.

coothead
02-15-2007, 11:15 AM
Hi there riyadh,

does this help...

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<style type="text/css">

</style>

<script type="text/javascript">
window.onload=function(){
rotateImage();
}
function rotateImage(){
obj=document.getElementById('pic');
now=new Date().getHours();
if((now<6)&&(now>=0)){ /* 12 midnight to 6am */
obj.src='image_0.jpg';
}
else {
if((now<12)&&(now>=6)){ /* 6am to 12 noon */
obj.src='image_1.jpg';
}
else {
if((now<18)&&(now>=12)){ /* 12 noon to 6pm */
obj.src='image_2.jpg';
}
else {
if((now<24)&&(now>=18)){ /* 6pm to 12 midnight */
obj.src='image_3.jpg';
}
}
}
}
}
</script>

</head>
<body>

<div>
<img id="pic" src="an_image.jpg" alt=""/> <!--this will be an image for those who have javascript disabled //-->
</div>

</body>
</html>
coothead

jscheuer1
02-15-2007, 02:10 PM
Aside from this error/typo:



obj.obj.src='image_3.jpg';

that will work but, the code is a bit overly complex and it needlessly exposes a number of global objects (which can cause conflicts with other scripts on the page, if any). This version works just as well and exposes nothing to the global object:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/1999/REC-html401-19991224/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body>
<div>
<img id="pic" src="an_image.jpg" alt=""> <!--this will be an image for those who have javascript disabled //-->
<script type="text/javascript">
if(document.getElementById&&document.getElementById('pic')&&document.images){
(function() {
var obj=document.getElementById('pic'), now=new Date().getHours();
if(now<6) /* 12 midnight to 6am */
obj.src='image_0.jpg';

else if(now<12) /* 6am to 12 noon */
obj.src='image_1.jpg';

else if(now<18) /* 12 noon to 6pm */
obj.src='image_2.jpg';

else /* 6pm to 12 midnight */
obj.src='image_3.jpg';
})();
}
</script>
</div>
</body>
</html>