here is a fully working example using nothing but javascript. it checks the hour in the current day based on the users time and then changes the background image from a default image (default is shown if javascript is turned off) to whatever image you want, just change the image url in the function.
Code:
<html>
<head>
<style type='text/css'>
body { background-image: url(default.jpg); background-repeat: no-repeat; background-position: top center; }
div { width: 600px; height: 70%; overflow-y: auto; margin: 100px auto; background-color: white; border: 2px solid black; }
</style>
<script type='text/javascript'>
function changeBG(){
date = new Date;
if(date.getHours() < 6 || date.getHours() >= 18){
//night time.
document.body.background = "moon.jpg";
document.body.style.backgroundColor = "#000044";
} else {
//day time.
document.body.style.backgroundColor = "#000044";
document.body.background = "sun.jpg";
}
};
</script>
</head>
<body onload="javascript:changeBG();">
<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec feugiat justo in magna iaculis
id pretium massa tristique. Vestibulum eu nisi eros, id hendrerit diam. Suspendisse luctus leo sit
amet velit porta sed egestas metus condimentum. Aenean convallis nisi vitae metus pretium rhoncus.
Nam tempor neque quis felis vulputate ornare. Suspendisse potenti. Vestibulum ante ipsum primis in
faucibus orci luctus et ultrices posuere cubilia Curae; Sed viverra, mi ac rhoncus convallis, tortor
velit vulputate felis, vitae porta nulla ipsum a nibh. Sed mollis, erat ac mattis fringilla, ante
tortor pharetra leo, sit amet rutrum odio metus et elit. Mauris lacinia commodo libero eget ultricies.
Nam ligula sem, hendrerit sit amet vehicula eget, posuere a neque. Proin metus risus, viverra a
volutpat in, luctus ut nibh. Fusce blandit mi nec turpis ultrices ultricies. Cras posuere sapien
a nibh vehicula sit amet iaculis dui ullamcorper. Sed non erat sapien, ac laoreet nunc. Sed non
sem non sem placerat lobortis. Pellentesque euismod, nulla id gravida ullamcorper, urna diam pulvinar
diam, sed eleifend lectus metus non tellus.</p>
<p>Ut id vulputate arcu. Curabitur non augue ipsum, eget iaculis metus. Class aptent taciti sociosqu
ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur ornare accumsan justo, non
bibendum dolor pretium non. Nam et nisl nulla. Duis cursus lacus eros, sed imperdiet felis. Integer
sed libero sapien. Suspendisse cursus lacinia tortor, ut malesuada dui pulvinar a. Aliquam gravida
suscipit felis, sit amet consectetur arcu facilisis at. Morbi et mi sed velit tristique gravida. Nam
sit amet leo ut augue molestie porta eget sit amet nisi. Suspendisse egestas dolor ornare nunc
hendrerit vitae venenatis justo facilisis. Sed elit dolor, molestie et rhoncus in, semper ut orci.
Nulla laoreet tempor nisi, non elementum mi aliquam vitae. Nullam ut ante nec sem eleifend vulputate
in quis enim. Pellentesque vel diam nec metus euismod eleifend quis ac mauris. Praesent facilisis quam
sit amet mi dignissim luctus.</p>
<p>Duis tempor blandit pellentesque. Vivamus felis risus, mattis quis condimentum vel, laoreet vel nibh.
Nunc lobortis, neque vitae egestas posuere, nibh lorem mattis purus, non tincidunt urna lacus in mauris.
Curabitur tellus tortor, laoreet non tincidunt non, aliquet eu nibh. Nulla tempor congue magna a lobortis.
Ut tincidunt, enim sollicitudin dapibus mollis, risus lacus pulvinar arcu, eget ullamcorper orci ante sed
odio. Integer vulputate, purus vel malesuada sodales, odio augue dapibus urna, ut placerat erat risus et
purus. Fusce orci mi, viverra sed dapibus quis, faucibus eget est. Mauris a consequat nisl. Donec at lacus
lacus, volutpat ornare mauris. Nunc varius lacus eget augue vestibulum id pulvinar ipsum placerat. Aenean
est lacus, vulputate at egestas nec, rutrum eu orci. Sed eros orci, porta feugiat posuere vitae, porttitor
sed sem. Sed varius venenatis orci, sed tempus est tempor at. Duis arcu metus, scelerisque ac ornare quis,
condimentum non ipsum. Mauris dolor purus, varius faucibus mattis ac, dictum et nisi. Etiam euismod aliquet
magna et condimentum. Curabitur eget urna enim.</p>
<p>Duis nulla nibh, aliquet sit amet euismod nec, vulputate et risus. Cum sociis natoque penatibus et
magnis dis parturient montes, nascetur ridiculus mus. Sed et velit at ipsum eleifend tempor. Ut id
sapien ante, non molestie ipsum. Nulla a ultricies enim. Morbi odio ipsum, faucibus a faucibus vitae,
condimentum et mauris. Nullam a odio turpis, vitae viverra nulla. Quisque feugiat sem vitae lacus
feugiat bibendum. Etiam at metus vel nunc interdum lobortis eu nec purus. Pellentesque a viverra purus.</p>
<p>Quisque sagittis nibh vel dolor rhoncus dapibus. Cras blandit rutrum lectus in volutpat. Maecenas
malesuada nulla ut tellus ullamcorper imperdiet. Nullam at dui elit. Morbi scelerisque mi eu quam molestie
sit amet semper sem lacinia. Nam aliquet volutpat sapien, placerat venenatis leo adipiscing sit amet.
Maecenas volutpat nunc vel diam malesuada eget eleifend ligula blandit. Cras sit amet lacus vitae ligula
condimentum fermentum a sit amet enim. Sed congue pulvinar ligula. Sed accumsan facilisis nisl, a
vestibulum enim feugiat ut.</p>
</div>
</body>
</html>
Codewalkers Forums Sponsor:
October 17th, 2009, 06:52 PM
Del.icio.us
Digg
Google
Spurl
Blink
Furl
Simpy
Y! MyWeb
Linear Mode
