dhteumeuleu » world

world

On September 15, 2006, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/world-map.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>world - Interactive DHTML art-demos</title> 
<meta name="Author" content="Gerard Ferrandez at http://www.dhteumeuleu.com"> 
<meta http-equiv="imagetoolbar" content="no"> 
<style type="text/css"> 
	html { 
		overflow: hidden; 
	} 
	body { 
		margin: 0px; 
		padding: 0px; 
		background: #000; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		cursor: url("../no.cur"), auto; 
 
	} 
	.center { 
		position: absolute; 
		left: 50%; 
		top: 50%; 
		width: 100%; 
		height: 100%; 
	} 
 
	#sp { 
		position: absolute; 
		left: -231px; 
		top: -121px; 
		width: 100%; 
		height: 100%; 
	} 
	#sp span { 
		position: absolute; 
		left: -1000px; 
		width: 7px; 
		height: 7px; 
		background: #222; 
		overflow: hidden; 
		font-size: 1px; 
	} 
	#bh { 
		position: absolute; 
		left: -50%; 
		width: 150%; 
		top: -100px; 
		height: 7px; 
		font-size: 1px; 
		background: #222; 
		z-index: 4; 
	} 
	#bv { 
		position: absolute; 
		top: -50%; 
		height: 150%; 
		left: -100; 
		width: 7px; 
		font-size: 1px; 
		background: #222; 
		z-index: 4; 
	} 
	#pt { 
		position: absolute; 
		height: 7px; 
		width: 7px; 
		font-size: 1px; 
		background: #F00; 
		z-index: 4; 
	} 
</style> 
 
<script type="text/javascript"> 
// ==================================================== 
//           ====== World Map ====== 
// script: Gerard Ferrandez - Ge-1-doot - July 2005 
// http://www.dhteumeuleu.com/ 
// ==================================================== 
 
var object = []; 
var world = "001F8C0C400031F30E7FE000FF964FFFFF00FFB067FFFE001FF03FFFFA001FF07FFFFC003F806BFFF4001F8020FFF4001D007FFFF4000E80FFE7F0000600FFC6680001E07FC2180001F00FC0780001FC0F81730001FC0F80940000FC0F400F0020780F403F00007006001F00006000000640006000000080006000000000002000000000"; 
var xm  = -1000, 
    ym  = -1000, 
    xmb = 0, 
    ymb = 0, 
    nx  = 0, 
    ny  = 0, 
    sx, 
    sy, 
    sp, 
    bv, 
    bh, 
    pt; 
 
/* mouse events */ 
document.onmousemove = function(e){ 
	if (window.event) e = window.event; 
	xm = (e.x || e.clientX) - nx; 
	ym = (e.y || e.clientY) - ny; 
	xm = Math.round(Math.round(xm/11)*11); 
	ym = Math.round(Math.round(ym/11)*11); 
} 
 
function resize() { 
	sx = sp.offsetLeft; 
	sy = sp.offsetTop; 
	nx = document.body.offsetWidth * .5 + sx; 
	ny = document.body.offsetHeight * .5 + sy; 
} 
onresize = resize; 
 
/* create pixel */ 
function CObj(x, y){ 
	var o = document.createElement("span"); 
	o.style.left = Math.round(x * 11)+"px"; 
	o.style.top  = Math.round(y * 11)+"px"; 
	sp.appendChild(o); 
	o = document.createElement("span"); 
	sp.appendChild(o); 
	this.obj  = o.style; 
	this.x    = x; 
	this.y    = y; 
	this.x0   = x * 11; 
	this.y0   = y * 11; 
	this.anim = true; 
} 
 
CObj.prototype.mainloop = function(){ 
 	var dx                 = xm - this.x0; 
	var dy                 = ym - this.y0; 
	var dist               = Math.sqrt(dx * dx + dy * dy); 
	if (dist < 140) { 
		/* globe */ 
		if(!this.anim){ 
			this.anim           = true; 
			this.obj.background = (((this.x>16&&this.x<23&&this.y<8)&&!(this.x==22&&this.y==6))||(this.x==23&&this.y==3))?"#F80":"#FFF"; 
			this.obj.zIndex     = 5; 
		} 
		var M                   = Math.cos(.5 * Math.PI * dist / 140); 
		this.obj.left           = Math.round(-sx -xm + this.x0 - dx * M)+"px"; 
		this.obj.top            = Math.round(-sy -ym + this.y0 - dy * M)+"px"; 
		this.obj.width          = this.obj.height = Math.round(M * 14)+"px"; 
	} else { 
		if(this.anim){ 
			/* background */ 
			this.obj.left       = this.x0+"px"; 
			this.obj.top        = this.y0+"px"; 
			this.obj.width      = this.obj.height = ""; 
			this.obj.background = (((this.x>16&&this.x<23&&this.y<8)&&!(this.x==22&&this.y==6))||(this.x==23&&this.y==3))?"#C70":"#666"; 
			this.obj.zIndex     = 3; 
			this.anim           = false; 
		} 
	} 
} 
 
function mainloop(){ 
	/* mainloop */ 
	if(xm!=xmb || ym!=ymb){ 
		bv.left = xm+"px"; 
		bh.top  = ym+"px"; 
		pt.left = xm+"px"; 
		pt.top  = ym+"px"; 
		for(i in object) object[i].mainloop(); 
	} 
	xmb = xm; 
	ymb = ym; 
	setTimeout(mainloop, 16); 
} 
 
onload = function(){ 
	/* pointers */ 
	bv = document.getElementById("bv").style; 
	bh = document.getElementById("bh").style; 
	pt = document.getElementById("pt").style; 
	sp = document.getElementById("sp"); 
	/* decompress world */ 
	var bits = ""; 
	var o; 
	for(var i=0, n=world.length; i<n; i+=2){ 
		o = parseInt(world.substring(i,i+2), 16).toString(2); 
		bits += "00000000".substring(0, 8-o.length)+o; 
	} 
	/* create pixels */ 
	var k = 0; 
	for(var y=0;y<22;y++){ 
		for(var x=0;x<48;x++){ 
			if(bits.charAt(k++)=="1")object.push(new CObj(x, y)); 
		} 
	} 
	/* run */ 
	resize(); 
	mainloop(); 
} 
 
</script> 
</head> 
<body> 
 
 
<div class="center"> 
 
	<div id="sp"> 
		<div id="bh"> </div> 
		<div id="bv"> </div> 
		<div id="pt"> </div> 
	</div> 
 
</div> 
 
</body> 
</html>

Tagged with: 3D