dhteumeuleu » click

click

On September 1, 2006, in demo, by ge1doot

Maximize

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/drag-3x.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>click - 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: crosshair; 
	} 
	#screen { 
		position: absolute; 
		width: 100%; 
		height: 100%; 
		background: #eee; 
		overflow: hidden; 
	} 
	#screen img { 
		position: absolute; 
	} 
	#screen div { 
		position: absolute; 
		overflow: hidden; 
		border: #aaa solid 1px; 
	} 
	#screen .dfrm { 
		left: 20px; 
		top: 50px; 
		height: 30%; 
		width: 25%; 
		visibility: hidden; 
	} 
	#screen .dfrm img { 
		cursor: pointer; 
	} 
	#bkg { 
		filter: alpha(opacity=20); 
		opacity: 0.2; 
	} 
	#txt { 
		position: absolute; 
		left: 5%; 
		top: 50%; 
		width: 90%; 
		height: 50%; 
		color: #666; 
		font-family: arial, helvetica, verdana, sans-serif; 
		font-size: .9em; 
		text-align: justify; 
	} 
	#frame { 
		background: #fff; 
		cursor: pointer; 
	} 
</style> 
 
<script type="text/javascript"> 
// ========================================================= 
// script by Gerard Ferrandez - September 2006 
// http://www.dhteumeuleu.com 
// ========================================================= 
 
 
var H = 0; 
var W = 0; 
var M = false; 
var txt, frm, dfrm; 
var xZ, yZ; 
var nx = 0; 
var ny = 0; 
var nw = 0; 
var nh = 0; 
 
 
function resize() { 
	with (document.getElementById("screen")) { 
		nx = offsetLeft; 
		ny = offsetTop; 
		nw = offsetWidth; 
		nh = offsetHeight; 
	} 
	with (frm.style) { 
		width  = W + "px"; 
		height = H + "px"; 
		left   = Math.round((nw-W)/2) + "px"; 
		top    = Math.round((nh-H)/2) + "px"; 
	} 
} 
onresize = resize; 
 
document.onmousemove = function(e){ 
	if (!e) e = window.event; 
	xm = (e.x || e.clientX) - nx; 
	ym = (e.y || e.clientY) - ny; 
	if(M != false){ 
		if(M.id == "frame"){ 
			var xM = M.offsetLeft - (xm + xZ); 
			var yM = M.offsetTop - (ym + yZ); 
			for(var i=0; i<3; i++) { 
				dfrm[i].style.left = (dfrm[i].xZ - (xm + xZ)) + "px"; 
				dfrm[i].style.top  = (dfrm[i].yZ - (ym + yZ)) + "px"; 
				move(dfrm[i]); 
			} 
			M.style.left = (xm + xZ) + "px"; 
			M.style.top  = (ym + yZ) + "px"; 
		} else { 
			M.style.left = (xm + dfrm[M.i].xZ) + "px"; 
			M.style.top  = (ym + dfrm[M.i].yZ) + "px"; 
			move(M); 
		} 
	} 
	return false; 
} 
document.onmousedown = function(e){ 
	if (!e) e = window.event; 
	tg = (e.target) ? e.target : e.srcElement; 
	if(tg.id == "txt" || tg.parentNode.id == "txt") tg = document.getElementById("bkg"); 
	if(tg.parentNode.className == "dfrm"){ 
		M = tg.parentNode; 
		dfrm[M.i].xZ = M.offsetLeft - xm; 
		dfrm[M.i].yZ = M.offsetTop - ym; 
		tg.style.cursor = "move"; 
	} 
	if(tg.parentNode.id == "frame"){ 
		M = tg.parentNode; 
		xZ = M.offsetLeft - xm; 
		yZ = M.offsetTop - ym; 
		M.style.cursor = "move"; 
		for(var i=0; i<3; i++) { 
			dfrm[i].xZ = frm.offsetLeft + dfrm[i].offsetLeft; 
			dfrm[i].yZ = frm.offsetTop + dfrm[i].offsetTop; 
		} 
	} 
	return false; 
} 
document.onmouseup = function(){ 
	if(M != false){ 
		if(M.id == "frame") M.style.cursor = "pointer"; 
		else M.tg.cursor = "pointer"; 
		M = false; 
	} 
} 
 
move = function(o) { 
	o.tg.left = (-o.offsetLeft-1) + "px"; 
	o.tg.top  = (-o.offsetTop-1) + "px"; 
} 
 
onload = function() { 
	txt = document.getElementById("txt"); 
	frm = document.getElementById("frame"); 
	dfrm = frm.getElementsByTagName("div"); 
	W = document.getElementById("bkg").width; 
	H = document.getElementById("bkg").height; 
	resize(); 
	dfrm[1].style.left = (dfrm[0].offsetLeft + dfrm[0].offsetWidth + 20) + "px"; 
	dfrm[2].style.left = (dfrm[1].offsetLeft + dfrm[1].offsetWidth + 20) + "px"; 
	for(var i=0; i<3; i++) { 
		dfrm[i].i  = i; 
		dfrm[i].xZ = 0; 
		dfrm[i].yZ = 0; 
		dfrm[i].tg = dfrm[i].getElementsByTagName("img")[0].style; 
		move(dfrm[i]); 
		setTimeout("dfrm["+i+"].style.visibility='visible';", 1000+500*(i+1)); 
	} 
} 
 
</script> 
</head> 
 
<body> 
<div id="screen"> 
	<div id="frame" style=""> 
		<img id="bkg" alt="" src="../images/mask.jpg"> 
		<span id="txt"> 
			<span style="font-size: 3em">Absent</span><br> 
			I expected to make everyone unaware of my absence during the next ten minutes; not that I felt too sure whether I would be able to synchronize the reversal process. I prepared my tools, checked the remote control that hopefully would start up the echoers; these were to create both the three-dimensional movement illusion and the tactile resistance. I deposited the small countersensor on the floor; I caressed the temporary disaggregator hiding in my pocket. I prepared myself for my own disappearance, took a deep breath; then pressed the button. 
		</span> 
		<div class="dfrm"><img alt="" src="../images/mask.jpg"></div> 
		<div class="dfrm"><img alt="" src="../images/mask.jpg"></div> 
		<div class="dfrm"><img alt="" src="../images/mask.jpg"></div> 
	</div> 
</div> 
 
</body> 
</html>

Tagged with: drag