dhteumeuleu » No click !

Direct Link

Download: http://www.dhteumeuleu.com/lab/noclick.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>noclick - Interactive DHTML</title> 
<style type="text/css"> 
	body { 
		margin: 0px; 
		padding: 0px; 
		background: #717171; 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		color: #FFF; 
		font-family: arial; 
		font-size: 1em; 
	} 
</style> 
<script type="text/javascript"> 
/* ====================================================================================== 
                              ===== no click ===== 
        script by Gerard Ferrandez - ge1doot - April 28, 2007 
        http://www.dhteumeuleu.com - CC-BY-NC 
   ====================================================================================== */ 
 
var xm = 0; 
var ym = 0; 
document.onmousemove = function(e){ 
	if (window.event) e=window.event; 
	xm = e.clientX; 
	ym = e.clientY; 
} 
 
var noclick = { 
	O : [], 
	run : function() { 
		for (var i = 0, o; o = noclick.O[i]; i++) 
			o.anim(); 
	}, 
	resize : function() { 
		for (var i = 0, o; o = noclick.O[i]; i++) 
			o.resize(); 
	}, 
	init : function(){ 
		for (var i = 0, o; o = document.body.getElementsByTagName("*")[i]; i++){ 
			if (o.className.indexOf('noclick') >= 0) { 
				o.l0 = o.style.left; 
				o.t0 = o.style.top; 
				o.resize = function() { 
					this.style.left = this.l0; 
					this.style.top = this.t0; 
					for (var nx = 0, ny = 0, o = this.offsetParent; o != null; o = o.offsetParent) 
						nx += o.offsetLeft, ny += o.offsetTop; 
					this.x0 = nx; 
					this.y0 = ny; 
					this.ox = this.offsetLeft; 
					this.oy = this.offsetTop; 
					this.rx = (this.style.position == 'absolute') ? 0 : this.ox; 
					this.ry = (this.style.position == 'absolute') ? 0 : this.oy; 
					this.px = this.ox; 
					this.py = this.oy; 
					this.nw = this.offsetWidth / 2; 
					this.nh = this.offsetHeight / 2; 
					this.dp = Math.max(this.offsetWidth, this.offsetHeight); 
				} 
				o.anim = function() { 
					var xmm = xm - this.x0 - this.nw; 
					var ymm = ym - this.y0 - this.nh; 
					var dx = xmm - this.px; 
					var dy = ymm - this.py; 
					var d = Math.sqrt(dx * dx + dy * dy); 
					this.px += ((this.ox - this.px) * .2); 
					this.py += ((this.oy - this.py) * .2); 
					if(d < this.dp && d > 0 ){ 
						this.px = xmm - (this.dp * (xmm - this.px) / d); 
						this.py = ymm - (this.dp * (ymm - this.py) / d); 
					} 
					this.style.left = Math.round(this.px - this.rx) + 'px'; 
					this.style.top  = Math.round(this.py - this.ry) + 'px'; 
				} 
				o.resize(); 
				this.O.push(o); 
			} 
		} 
		setInterval(noclick.run, 16); 
	} 
} 
 
 
onload = function () { 
	noclick.init(); 
} 
 
function resize() { 
	noclick.resize(); 
} 
onresize = resize; 
</script> 
 
</head> 
 
<body> 
<br><br> 
<div style="position:relative;text-align:center;z-index:1"> 
<h1>EMERGENCY STRESS RELEASE</h1>Please click the <span class="noclick" style="position:relative;font-weight:bold;">button</span> below! 
</div> 
<div style="position:absolute;left:50%;top:50%;"> 
	<img class="noclick" src="../images/button.gif" style="position:absolute;left:-42px;top:-42px;z-index:0"> 
</div> 
</body> 
</html>