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...

Code:

<!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:

Originally Posted by coothead

Code:

 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:

Code:

<!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>

Thread: images shown depending on time of day

Thread Tools

Search Thread

images shown depending on time of day

Bookmarks

Bookmarks

Posting Permissions