PDA

View Full Version : Dynamic Background


Chapo
04-19-2010, 04:51 AM
Ok.... im creating a Weather Site and it will be nice to have a background that changes colors depending on the hour, if its morning it will be dark blue, then during day light blue, then a orange for sunset and black with stars at night. I have this with my gmail background and i thought it will be great for this site i'm building, how can i do it ?

edbr
04-19-2010, 06:13 AM
serch tjhe forum this has been covered using javascript (by member pete i think)

edbr
04-19-2010, 08:55 AM
wow i found it. you can modify this perhaps
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="EN">
<head>
<title>demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript">
var timeScript = {
hour:new Date().getHours(),
getHour:function(){
return this.hour;
},
showImage:function(){
var h = this.getHour();
if(h>=13 && h<=17){
document.getElementById('t').className = 'afternoon';
} else if(h>=9 && h<=12){
document.getElementById('t').className = 'morning';
}
}
}
window.onload = function(){
timeScript.showImage();
}
</script>

<style type="text/css">
<!--
body {
font-family:arial,verdana, sans-serif;
}
#t {
margin:20px auto 20px auto;
width:350px;
height:200px;
}
.afternoon {
background-image:url(afternoon.jpg);
}
.morning {
background-image:url(morning.jpg);
}
-->
</style>
</head>
<body>
<div id="t"></div>
</body>
</html>

tux
04-19-2010, 09:55 AM
You could also do this using PHP.

Get the current time and then dynamically change the CSS class on your body tag or whichever tag holds the background according to what time it is.

Chapo
04-19-2010, 06:19 PM
Thanx guys... i will give it try