Dynamic Day'n'Night Worldmap

Dynamic Day'n'Night Worldmap
Where is night right now? Where is day? Day'n'night worldmap paints the current nightzones and dayzones straight into a tiny worldmap! You may put the worldmap anywhere into your webpage. You may even use a worldmap of your own. Internet Explorer 4 or higher.

Configuration:

Step 1: Take the 13 images (gif-images) out of the folder 'images' and put them into the same folder as the webpage that contains your day'n'night map.

Step 2: Open your webpage and paste the following code where you want to display your day'n'night map.

// CONFIGURATION:
// Go to www.24fun.com, open category 'utility' and download 
// the full-version of this script as ZIP-file with all images and files 
// and step-by-step instructions for non-programmers.

// URL of your worldmap. 
var globalmapimage="globalmap.gif"

var globalmapwidth=105
var globalmapheight=62
var nightzonewidth=globalmapwidth
var nightzoneheight=globalmapheight

var clipnighttop
var clipnightbottom
var clipnightright=0
var clipnightleft=0
var clipnightpoints

var differencehours
var differencepixels
var now=new Date()
var utchours=now.getUTCHours()
var monthimage=now.getMonth()

if (monthimage==0) {monthimage="january"}
else if (monthimage==1) {monthimage="february"}
else if (monthimage==2) {monthimage="march"}
else if (monthimage==3) {monthimage="april"}
else if (monthimage==4) {monthimage="may"}
else if (monthimage==5) {monthimage="june"}
else if (monthimage==6) {monthimage="july"}
else if (monthimage==7) {monthimage="august"}
else if (monthimage==8) {monthimage="september"}
else if (monthimage==9) {monthimage="october"}
else if (monthimage==10) {monthimage="november"}
else if (monthimage==11) {monthimage="december"}

var preloadmonthimage=new Image()
preloadmonthimage.src=monthimage

var preloadglobalmap=new Image()
preloadglobalmap.src=globalmapimage

function initiatedaynight() {
	clipnighttop=0
	clipnightbottom=globalmapheight
	
	document.all.globalmap.style.visibility="visible"
	
	nightzoneright.innerHTML="<img src='"+monthimage+".gif' width='"+nightzonewidth+"' height='"+nightzoneheight+"'>"
	nightzoneleft.innerHTML="<img src='"+monthimage+".gif' width='"+nightzonewidth+"' height='"+nightzoneheight+"'>"
	setnightstripes()
}

function setnightstripes() {
	differencepixels=globalmapwidth/24*utchours
	document.all.nightzoneleft.style.posLeft-=differencepixels
	clipnightleft=document.all.globalmap.style.posLeft-document.all.nightzoneleft.style.posLeft
	clipnightright=globalmapwidth
	clipnightpoints="rect("+clipnighttop+" "+clipnightright+" "+clipnightbottom+" "+clipnightleft+")"
	document.all.nightzoneleft.style.clip=clipnightpoints
	document.all.nightzoneleft.style.visibility="visible"
	
	document.all.nightzoneright.style.posLeft=document.all.nightzoneleft.style.posLeft+globalmapwidth
	clipnightleft=0
		clipnightright=globalmapwidth-(document.all.nightzoneright.style.posLeft-document.all.globalmap.style.posLeft)
	clipnightpoints="rect("+clipnighttop+" "+clipnightright+" "+clipnightbottom+" "+clipnightleft+")"
	document.all.nightzoneright.style.clip=clipnightpoints
	document.all.nightzoneright.style.visibility="visible"
}

if (document.all) {
	document.write('<span id="roofmap" style="position:relative;width:'+globalmapwidth+'px;height:'+globalmapheight+'px;overflow:hidden">')

document.write('<div id="globalmap" style="position:absolute;top:0px;left:0px;width:'+globalmapwidth+'px;height:'+globalmapheight+'px;visibility:hidden"><img src="'+globalmapimage+'"></div>')

document.write('<div id="nightzoneleft" style="position:absolute;top:0px;left:0px;width:'+globalmapwidth+'px;height:'+globalmapheight+'px;visibility:hidden;filter:alpha(opacity=30)"></div>')

document.write('<div id="nightzoneright" style="position:absolute;top:0px;left:0px;width:'+globalmapwidth+'px;height:'+globalmapheight+'px;visibility:hidden;filter:alpha(opacity=30)"></div>')
document.write('</span>')

window.onload=initiatedaynight
}
</script>

Step 5: If you prefer a to use a worldmap of your own take care:
- that you name it "globalmap.gif"
- that London is the horizontal center of the worldmap.
- that the north pole marks the top of the worldmap
- that the bottom of South America marks the bottom of the worldmap

Click here to download files