dhteumeuleu » dock

dock

On February 8, 2006, in demo, by ge1doot

Maximize Page : PreviousNext

Direct Link

Download: http://www.dhteumeuleu.com/dhtml/s-dock.html

Source code

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<title>dock menu - 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 { 
		background: #fff; 
		width: 98%; 
		height: 100%; 
	} 
	#dock { 
		position: absolute; 
		bottom: 1em; 
		width: 100%; 
		text-align: center; 
		left: 0px; 
	} 
	#dock a:visited{ 
		text-decoration: none; 
	} 
	#dock a{ 
		text-decoration: none; 
		margin: -2px; 
	} 
	#dock img { 
		border: none; 
		width: 0px; 
	} 
	#legend { 
		position: absolute; 
		bottom: 0px; 
		width: 100%; 
		text-align: center; 
		font-family: arial; 
		font-weight: bold; 
		font-size: 1em; 
		color: #000; 
	} 
</style> 
 
<script type="text/javascript"> 
// ================================================================ 
//                   ------ dock menu ------- 
// script by Gerard Ferrandez - Ge-1-doot - February 2006 
// http://www.dhteumeuleu.com 
// ================================================================ 
 
 
var dock = function (dock, sMin, sMax) { 
	/* ---- private vars ---- */ 
	var xm = xmb = ov = 0; 
	var M = true; 
	var icons = document.getElementById(dock).getElementsByTagName('img'); 
	var N = icons.length; 
	var s = sMin; 
	var ovk = 0; 
	var addEvent = function (o, e, f) { 
		if (window.addEventListener) o.addEventListener(e, f, false); 
		else if (window.attachEvent) r = o.attachEvent('on' + e, f); 
	} 
	var pxLeft = function(o) { 
		for(var x=-document.documentElement.scrollLeft; o != null; o = o.offsetParent) x+=o.offsetLeft; 
		return x; 
	} 
	for(var i=0;i<N;i++) { 
		var o = icons[i]; 
		o.style.width = sMin+"px"; 
		o.style.height = sMin+"px"; 
		o.className = "dockicon"; 
	} 
	var run = function() { 
		for(var i=0;i<N;i++) { 
			var o = icons[i]; 
			var W = parseInt(o.style.width); 
			if(ov && ov.className=="dockicon") { 
				if(ov!=ovk){ 
					ovk=ov; 
					document.getElementById("legend").innerHTML = ov.lang; 
				} 
				if(M) W = Math.max((s*Math.cos(((pxLeft(o)+W/2)-xm)/sMax)),sMin); 
				s = Math.min(sMax,s+.5); 
			} else { 
				s = Math.max(s-.5,sMin); 
				W = Math.max(W-N,sMin); 
			} 
			o.style.width = W+"px"; 
			o.style.height = W+"px"; 
		} 
		if(s >= sMax) M = false; 
	} 
	addEvent(document, 'mousemove', function (e) { 
		if(window.event) e=window.event; 
		xm = (e.x || e.clientX); 
		if(xm!=xmb){ 
			M = true; 
			xmb = xm; 
		} 
		ov = (e.target)?e.target:((e.srcElement)?e.srcElement:null); 
	}); 
	setInterval(run, 16); 
}; 
 
window.onload = function() { 
	dock("dock", 48, 128); 
} 
 
 
</script> 
</head> 
 
<body> 
 
<div id="dock"> 
	<a href="http://www.dhteumeuleu.com/one-day/" target="_blank"><img src="../images/Home.gif" lang="Home"></a> 
	<a href="http://www.dhteumeuleu.com/he-knew/" target="_blank"><img src="../images/My Computer.gif" lang="My Computer"></a> 
	<a href="http://www.dhteumeuleu.com/not-in-vein/" target="_blank"><img src="../images/Books.gif" lang="Files"></a> 
	<a href="http://www.dhteumeuleu.com/further-caveats/" target="_blank"><img src="../images/Applications.gif" lang="Applications"></a> 
	<a href="http://www.dhteumeuleu.com/light-shift-opticals/" target="_blank"><img src="../images/Chat.gif" lang="Chat"></a> 
	<a href="http://www.dhteumeuleu.com/the-dolls/" target="_blank"><img src="../images/Sound App.gif" lang="Sound"></a> 
	<a href="http://www.dhteumeuleu.com/wanna-tell-her/" target="_blank"><img src="../images/Printers.gif" lang="Printers"></a> 
	<a href="http://www.dhteumeuleu.com/in-absence/" target="_blank"><img src="../images/Trash Full.gif" lang="Trash"></a> 
	<a href="http://www.dhteumeuleu.com/mistakes/" target="_blank"><img src="../images/Help.gif" lang="Help"></a> 
</div> 
<div id="legend"></div> 
 
</body> 
</html>

Tagged with: menu