www.dhteumeuleu.com

target.html


Donation

Do you like this code ? Is it worth one or two dollars ? Any donation is appreciated !
Thank you for your support :)

Email notification

Leave your email to receive dhteumeuleu updates:

Delivered by FeedBurner

Source Code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>rubble - 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%;
	}
	#sq {
		left: -2000px;
		position: absolute;
	}
	#vs {
		height: 111px;
		left: -4000px;
		position: absolute;
		width: 148px;
	}
	#sqi {
		position: absolute;
		width: 304px;
		filter: alpha(opacity=100);
	}
	#vsx {
		height: 111px;
		overflow: hidden;
		position: absolute;
		width: 148px;
		border:#666 dotted 1px;
	}
	#vs span {
		position: absolute;
	}
	#t0 {
		height: 4000px;
		left: 75px;
		top: -2000px;
		width: 1px;
		border-left:#666 dotted 1px;
	}
	#t1 {
		width: 4000px;
		top: 56px;
		left: -2000px;
		height: 1px;
		font-size:0px;
		border-top:#666 dotted 1px;
	}
</style>

<script type="text/javascript">
// ===========================================================
// Gerard Ferrandez - janv 2000
// http://www.dhteumeuleu.com
// ===========================================================
document.onselectstart = new Function("return false");

var object = new Array();
var sw,sh,sw2,sh2,sx,sy,svx,svy,xm,ym,ax,ay,nx,ny,nxb,nyb;

function resize() {
	nx=document.body.offsetWidth;
	ny=document.body.offsetHeight;
}
onresize = resize;

function CObj(N,obj,res,lim,inv){
	obj.style.visibility="visible";
	this.sw   = obj.offsetWidth;
	this.sw2  = this.sw/2;
	this.sh   = obj.offsetHeight;
	this.sh2  = this.sh/2;
	this.sx   = 0;
	this.sy   = 0;
	this.svx  = 4;
	this.svy  = 8;
	this.ax   = 0;
	this.ay   = 0;
	this.sqi  = document.getElementById("sqi").style;
	this.anim = function () {
		if(inv){
			var xmo = xm;
			var ymo = ym;
		} else {
			var xmo = nx - xm;
			var ymo = ny - ym;
		}
		this.svx = res*this.svx-(this.sx-xmo+this.sw2+this.ax)/200;
		this.svy = res*this.svy-(this.sy-ymo+this.sh2+this.ay)/200;
		if(lim){
			if(this.sx>-100 && this.svx>0) {
				this.svx=this.svx/2;
				if(this.sx>=0)this.svx=0;
			} else if(this.sx+this.sw<nx+100 && this.svx<0){
				this.svx=this.svx/2;
				if(this.sx+this.sw<=nx)this.svx=0;
			}
			if(this.sy>-100 && this.svy>0) {
				this.svy=this.svy/2;
				if(this.sy>=0)this.svy=-this.svy;
			} else if(this.sy+this.sh<ny+100 && this.svy<0){
				this.svy=this.svy/2;
				if(this.sy+this.sh<=ny)this.svy=0;
			}
		}
		this.sx += this.svx;
		this.sy += this.svy;
		obj.style.left = Math.round(this.sx)+"px";
		obj.style.top  = Math.round(this.sy)+"px";
		if(N == 1){
			this.sqi.left = Math.round(-this.sx*152/(nx-152))+"px";
			this.sqi.top  = Math.round(-this.sy*113/(ny-113))+"px";
		}
		setTimeout(function() {
	  		object[N].anim();
		},16);
	}
	this.anim();
}

onload = function() {
	resize();
	xm = nx/2;
	ym = ny/2;
	document.onmousemove = function(e){
		if (window.event) e = window.event;
		xm = nx - (e.x || e.clientX) + 4;
		ym = ny - (e.y || e.clientY) + 4;
	}
	object[0] = new CObj(0,document.getElementById("sq"),0.98,true,true);
	object[1] = new CObj(1,document.getElementById("vs"),0.98,false,false);
}
</script>
</head>

<body>


<img id="sq" src="blox_07_28_01.jpg">

<span id="vs">
	<span id="t0"></span>
	<span id="t1"></span>
	<span id="vsx">
		<img id="sqi" src="blox_07_28_01.jpg">
	</span>
</span>

</body>
</html>
Resource Images :

../images/blox_07_28_01.jpg


../images/blox_07_28_01.jpg



Resource music/sound :

../sound/ff8-The_Extreme.mid

All sounds and images are credited to the respective author(s).