页面顶部图片导航

下面为效果显示

脚本说明:
把如下代码加入<body>区域中
<SCRIPT type=text/javascript>
document.onmouseover = doOver;
document.onmouseout  = doOut;
document.onmousedown = doDown;
document.onmouseup   = doUp;

function doOver() {
	var toEl = getReal(window.event.toElement, "className", "coolButton");
	var fromEl = getReal(window.event.fromElement, "className", "coolButton");
	if (toEl == fromEl) return;
	var el = toEl;
	
//	alert(el);
	
//	var cDisabled = el.getAttribute("cDisabled");
	var cDisabled = el.cDisabled;
//	alert(cDisabled);
	cDisabled = (cDisabled != null); // If CDISABLED atribute is present
	
	if (el.className == "coolButton")
		el.onselectstart = new Function("return false");
	
	if ((el.className == "coolButton") && !cDisabled) {
		makeRaised(el);
		makeGray(el,false);
	}
}

function doOut() {
	var toEl = getReal(window.event.toElement, "className", "coolButton");
	var fromEl = getReal(window.event.fromElement, "className", "coolButton");
	if (toEl == fromEl) return;
	var el = fromEl;

//	var cDisabled = el.getAttribute("cDisabled");
	var cDisabled = el.cDisabled;
	cDisabled = (cDisabled != null); // If CDISABLED atribute is present

var cToggle = el.cToggle;
	toggle_disabled = (cToggle != null); // If CTOGGLE atribute is present

if (cToggle && el.value) {
		makePressed(el);
		makeGray(el,true);
	}
	else if ((el.className == "coolButton") && !cDisabled) {
		makeFlat(el);
		makeGray(el,true);
	}

}

function doDown() {
	el = getReal(window.event.srcElement, "className", "coolButton");
	
	var cDisabled = el.cDisabled;
	cDisabled = (cDisabled != null); // If CDISABLED atribute is present
	
	if ((el.className == "coolButton") && !cDisabled) {
		makePressed(el)
	}
}

function doUp() {
	el = getReal(window.event.srcElement, "className", "coolButton");
	
	var cDisabled = el.cDisabled;
	cDisabled = (cDisabled != null); // If CDISABLED atribute is present
	
	if ((el.className == "coolButton") && !cDisabled) {
		makeRaised(el);
	}
}

function disable(el) {

if (document.readyState != "complete") {
		window.setTimeout("disable(" + el.id + ")", 100);	// If document not finished rendered try later.
		return;
	}
	
	var cDisabled = el.cDisabled;
	
	cDisabled = (cDisabled != null); // If CDISABLED atribute is present

if (!cDisabled) {
		el.cDisabled = true;
		
		if (document.getElementsByTagName) {	// IE5
			el.innerHTML =	"<span style='background: buttonshadow; filter: chroma(color=red) dropshadow(color=buttonhighlight, offx=1, offy=1); width: 100%; height: 100%; text-align: center;'>" +
							"<span style='filter: mask(color=red); width: 100%; height: 100%; text-align: center;'>" +
							el.innerHTML +
							"</span>" +
							"</span>";
		}
		else { // IE4
			el.innerHTML =	'<span style="background: buttonshadow; width: 100%; height: 100%; text-align: center;">' +
							'<span style="filter:Mask(Color=buttonface) DropShadow(Color=buttonhighlight, OffX=1, OffY=1, Positive=0); height: 100%; width: 100%%; text-align: center;">' +
							el.innerHTML +
							'</span>' +
							'</span>';
		}
		
		//.inner {
		//	font: menu;
		//	width: 100px;
		//	filter: mask(color=red);
		//}
		//
		//.outer {
		//	width: 100px;
		//	background: buttonshadow;
		//	filter: chroma(color=red) dropshadow(color=buttonhighlight, offx=1, offy=1);
		//}

if (el.onclick != null) {
			el.cDisabled_onclick = el.onclick;
			el.onclick = null;
		}
	}
}

function enable(el) {
	var cDisabled = el.cDisabled;
	
	cDisabled = (cDisabled != null); // If CDISABLED atribute is present
	
	if (cDisabled) {
		el.cDisabled = null;
		el.innerHTML = el.children[0].children[0].innerHTML;

if (el.cDisabled_onclick != null) {
			el.onclick = el.cDisabled_onclick;
			el.cDisabled_onclick = null;
		}
	}
}

function addToggle(el) {
	var cDisabled = el.cDisabled;
	
	cDisabled = (cDisabled != null); // If CDISABLED atribute is present
	
	var cToggle = el.cToggle;
	
	cToggle = (cToggle != null); // If CTOGGLE atribute is present

if (!cToggle && !cDisabled) {
		el.cToggle = true;
		
		if (el.value == null)
			el.value = 0;		// Start as not pressed down
		
		if (el.onclick != null)
			el.cToggle_onclick = el.onclick;	// Backup the onclick
		else 
			el.cToggle_onclick = "";

el.onclick = new Function("toggle(" + el.id +"); " + el.id + ".cToggle_onclick();");
	}
}

function removeToggle(el) {
	var cDisabled = el.cDisabled;
	
	cDisabled = (cDisabled != null); // If CDISABLED atribute is present
	
	var cToggle = el.cToggle;
	
	cToggle = (cToggle != null); // If CTOGGLE atribute is present
	
	if (cToggle && !cDisabled) {
		el.cToggle = null;

if (el.value) {
			toggle(el);
		}

makeFlat(el);
		
		if (el.cToggle_onclick != null) {
			el.onclick = el.cToggle_onclick;
			el.cToggle_onclick = null;
		}
	}
}

function toggle(el) {
	el.value = !el.value;
	
	if (el.value)
		el.style.background = "URL(/images/tileback.gif)";
	else
		el.style.backgroundImage = "";

//	doOut(el);	
}

function makeFlat(el) {
	with (el.style) {
		background = "";
		border = "1px solid buttonface";
		padding      = "1px";
	}
}

function makeRaised(el) {
	with (el.style) {
		borderLeft   = "1px solid buttonhighlight";
		borderRight  = "1px solid buttonshadow";
		borderTop    = "1px solid buttonhighlight";
		borderBottom = "1px solid buttonshadow";
		padding      = "1px";
	}
}

function makePressed(el) {
	with (el.style) {
		borderLeft   = "1px solid buttonshadow";
		borderRight  = "1px solid buttonhighlight";
		borderTop    = "1px solid buttonshadow";
		borderBottom = "1px solid buttonhighlight";
		paddingTop    = "2px";
		paddingLeft   = "2px";
		paddingBottom = "0px";
		paddingRight  = "0px";
	}
}

function makeGray(el,b) {
	var filtval;
	
	if (b)
		filtval = "gray()";
	else
		filtval = "";

var imgs = findChildren(el, "tagName", "IMG");
		
	for (var i=0; i<imgs.length; i++) {
		imgs[i].style.filter = filtval;
	}

}

<SCRIPT type=text/javascript>
var floatWidth = 200;
var floatHeight = 24;	// extra 4 for the border
var snapHorizSize = 50;
var snapVertSize = 20;
var horizDockWidth = 50;	// When docked to the left or right
var vertDockHeight = 20;
var toolbarPos = "top";	// Start at this position

// The following three are global, don't edit
var errorInSetup = false;
var dragging = false;
var tx;
var ty;

var ie4 = document.all != null;;
var ie5 = document.all != null && document.getElementsByTagName != null;

/////////////////////////////////////////////////////////////////////////////
// Set up the event handlers
if	(ie5) {	// IE5 way of setting up event handlers is way too good to ignore
	window.attachEvent("onload", fixSize);
	window.attachEvent("onresize", fixSize);
	document.attachEvent("onmousedown", dockBarOnMouseDown);
	document.attachEvent("onmouseup", dockBarOnMouseUp);
	document.attachEvent("onmousemove", dockBarOnMouseMove);
}
else if (ie4) {
	window.onload=fixSize;
	window.onresize=fixSize;
	document.onmousedown = dockBarOnMouseDown;
	document.onmouseup = dockBarOnMouseUp;
	document.onmousemove = dockBarOnMouseMove;
}

// Set up the CSS
if (ie4 || ie5) {
document.styleSheets[0].addRule("#handle", "border-left: 1 solid buttonhighlight; border-right: 1 solid buttonshadow; border-top: 1 solid buttonhighlight; border-bottom: 1 solid buttonshadow;" +
								"padding: 0; margin: 1; cursor: move; width: 3; height: 18; overflow: hidden;");
document.styleSheets[0].addRule("#toolbar", "cursor: default; position: absolute; top: 0; left: 0; background: buttonface; border: 0;" +
								"height: 20; width: 100%; padding: 0px;	overflow: hidden; z-index: 1;");
document.styleSheets[0].addRule("#contentDiv","position: absolute; overflow:auto; XXXz-index: -1; height: 100%; width:100%; border: 2 inset white;");
document.styleSheets[0].addRule("body", "margin: 0; border: 0; overflow: hidden;");
}

function fixSize() {
	if (toolbar == null || handle == null || contentDiv == null || !(ie4 || ie5)) {
		if (!errorInSetup)
			alert("The setup of this page is not correct for this script to work. Contact the author of the page.");
		errorInSetup = true;
		return;
	}
	
	switch (toolbarPos) {
		case"top":
		toolbar.style.border = "0 solid buttonface";
		toolbar.style.width = "100%";
		toolbar.style.height = vertDockHeight;
		toolbar.style.top = 0;
		toolbar.style.left = 0;
		
		contentDiv.style.top = vertDockHeight;
		contentDiv.style.left = 0;
		contentDiv.style.height = document.body.clientHeight - vertDockHeight;
		contentDiv.style.width = "100%";

handle.style.height = vertDockHeight - 2;
		handle.style.width = 3;
		break;
	
		case "bottom":
		toolbar.style.border = "0 solid buttonface";
		toolbar.style.width = "100%";
		toolbar.style.height = vertDockHeight;
		toolbar.style.top = document.body.clientHeight - vertDockHeight;
		toolbar.style.left = 0;
	
		contentDiv.style.top = 0;
		contentDiv.style.left = 0;
		contentDiv.style.height = document.body.clientHeight - vertDockHeight;
		contentDiv.style.width = "100%";

handle.style.height = vertDockHeight - 2;
		handle.style.width = 3;
		break;
	
		case "left":
		toolbar.style.border = "0 solid buttonface";
		toolbar.style.width = horizDockWidth;
		toolbar.style.height = "100%";
		toolbar.style.top = 0;
		toolbar.style.left = 0;

contentDiv.style.top = 0;
		contentDiv.style.left = horizDockWidth;
		contentDiv.style.height = "100%";
		contentDiv.style.width = document.body.clientWidth - horizDockWidth;
		
		handle.style.height = 3;
		handle.style.width = horizDockWidth -2;
		break;

case "right":
		toolbar.style.border = "0 solid buttonface";
		toolbar.style.width = horizDockWidth;
		toolbar.style.height = "100%";
		toolbar.style.top = 0;
		toolbar.style.left = document.body.clientWidth - horizDockWidth;
		
		contentDiv.style.top = 0;
		contentDiv.style.left = 0;
		contentDiv.style.height = "100%";
		contentDiv.style.width = document.body.clientWidth - horizDockWidth;
		
		handle.style.height = 3;
		handle.style.width = horizDockWidth -2;
		break;
		
		case "float":
		toolbar.style.width = floatWidth;
		toolbar.style.height = floatHeight;
		toolbar.style.border = "2px outset white";
		
		contentDiv.style.top = 0;
		contentDiv.style.left = 0;
		contentDiv.style.height = "100%";
		contentDiv.style.width = "100%";

handle.style.height = floatHeight - 6;
		handle.style.width = 3;
	}
	if (toolbar.ondock != null) {
		if (typeof(toolbar.ondock) == "function")
			toolbar.ondock();
		else
			eval(toolbar.ondock);
	}
}
/////////////////////////////////////////////////////////////////////////////

function dockBarOnMouseDown() {
	if(window.event.srcElement.id == "handle") {
		ty = (window.event.clientY - toolbar.style.pixelTop);
		tx = (window.event.clientX - toolbar.style.pixelLeft);

dragging = true;
		
		window.event.returnValue = false;
		window.event.cancelBubble = true;
	}
	else {
		dragging = false;
	}	
}

function dockBarOnMouseUp() {
	dragging = false;
}

function dockBarOnMouseMove() {
	if(dragging) {
		// Top
		if((window.event.clientY) <= snapVertSize
			&& toolbarPos != "left" && toolbarPos != "right") {
			toolbarPos = "top";
			fixSize();
		}
		// Bottom
		else if (window.event.clientY >= document.body.clientHeight - snapVertSize
			&& toolbarPos != "left" && toolbarPos != "right") {

toolbarPos="bottom";
			fixSize();
		}
		// Left
		else if (window.event.clientX <= snapHorizSize
			&& toolbarPos != "top" && toolbarPos != "bottom") {

toolbarPos = "left";
			fixSize();	
		}
		// Right
		else if (window.event.clientX >= document.body.clientWidth - snapHorizSize
			&& toolbarPos != "top" && toolbarPos != "bottom") {

toolbarPos = "right";
			fixSize();	
		}
		else {
			toolbar.style.left = window.event.clientX;
			toolbar.style.top = window.event.clientY - ty;

toolbarPos = "float";
			fixSize();
		}

window.event.returnValue = false;
		window.event.cancelBubble = true;
	} 
}

</SCRIPT>
<STYLE type=text/css>BODY {
	BORDER-BOTTOM: 0px; BORDER-LEFT: 0px; BORDER-RIGHT: 0px; BORDER-TOP: 0px; MARGIN: 0px
}
.coolButton {
	HEIGHT: 20px; MARGIN: 1px; WIDTH: 20px
}
</STYLE>
<DIV id=toolbar onselectstart="return false"><SPAN id=handle 
title="Drag to move the container"></SPAN>
<SPAN class=coolButton 
onclick="window.location='http://www.163.com'" title=网易><IMG align=absMiddle 
height=16 src="arrowleft.gif" width=16></SPAN>
<SPAN onclick="window.location='http://www.sohu.com'" title=搜狐
class=coolButton id=next title=Next><IMG align=absMiddle height=16 
src="arrowright.gif" width=16></SPAN>
<SPAN 
class=coolButton onclick="window.open('http://www.1stscript.com/','_top')" 
title=首页><IMG align=absMiddle height=16 
src="favicon.gif" width=16></SPAN><SPAN 
class=coolButton 
onclick="window.open('http://www.sina.com.cn','_top')" 
title="新浪网"><IMG align=absMiddle height=16 
src="desktop.gif" width=16></SPAN>
<SPAN class=coolButton 
onclick="window.location='http://www.163.com'" title=网易><IMG align=absMiddle 
height=16 src="arrowleft.gif" width=16></SPAN>
<SPAN onclick="window.location='http://www.sohu.com'" title=搜狐
class=coolButton id=next title=Next><IMG align=absMiddle height=16 
src="arrowright.gif" width=16></SPAN><SPAN 
class=coolButton onclick="window.open('http://www.1stscript.com/','_top')" 
title=首页><IMG align=absMiddle height=16 
src="favicon.gif" width=16></SPAN><SPAN 
class=coolButton 
onclick="window.open('http://www.sina.com.cn','_top')" 
title="新浪网"><IMG align=absMiddle height=16 
src="desktop.gif" width=16></SPAN>
<SPAN class=coolButton 
onclick="window.location='http://www.163.com'" title=网易><IMG align=absMiddle 
height=16 src="arrowleft.gif" width=16></SPAN>
<SPAN onclick="window.location='http://www.sohu.com'" title=搜狐
class=coolButton id=next title=Next><IMG align=absMiddle height=16 
src="arrowright.gif" width=16></SPAN><SPAN 
class=coolButton onclick="window.open('http://www.1stscript.com/','_top')" 
title=首页><IMG align=absMiddle height=16 
src="favicon.gif" width=16></SPAN><SPAN 
class=coolButton 
onclick="window.open('http://www.sina.com.cn','_top')" 
title="新浪网"><IMG align=absMiddle height=16 
src="desktop.gif" width=16></SPAN>
<SPAN class=coolButton 
onclick="window.location='http://www.163.com'" title=网易><IMG align=absMiddle 
height=16 src="arrowleft.gif" width=16></SPAN>
<SPAN onclick="window.location='http://www.sohu.com'" title=搜狐
class=coolButton id=next title=Next><IMG align=absMiddle height=16 
src="arrowright.gif" width=16></SPAN><SPAN 
class=coolButton onclick="window.open('http://www.1stscript.com/','_top')" 
title=首页><IMG align=absMiddle height=16 
src="favicon.gif" width=16></SPAN><SPAN 
class=coolButton 
onclick="window.open('http://www.sina.com.cn','_top')" 
title="新浪网"><IMG align=absMiddle height=16 
src="desktop.gif" width=16></SPAN>
</DIV>
<DIV id=contentDiv>这里是正文内容