非常漂亮的链接提示效果 (附源码)

使用心得:

1.  mP.tTags = new Array("tr", "img");  //要添加提示的 标记名称

例如: mP.tTags = new Array("tr","img","a");

2. mP.useTables = false;   //容器标志,使用 Div 或Table

tooltip.js

//ToogleDisplay Start
function toggledisplay(section) {
	if (document.getElementById([section]).style.display == "block") {
		document.getElementById([section]).style.display = "none";
		document.images[section + "_img"].src = "/uploads/toggledisplay_expand.gif";
	} else {
		document.getElementById([section]).style.display = "block";
		document.images[section + "_img"].src = "/uploads/toggledisplay_collapse.gif";
	}
}

//ToogleDisplay End

//Font size control Start
function doZoom(size) {
	document.getElementById("zoomtext").style.fontSize = size + "px";
}
//Font size control End

//My Tips Srart
var mP = new Array();
mP.attDesc = "title";
mP.useDefStyle = false;
//mP.tClass = "*";
mP.tClass = "sub";
mP.popupDelay = 1;
mP.hideDelay = 75;
mP.instPopDur = 1;
mP.xOfst = 15;
mP.yOfst = 15;
mP.clipSteps = 10;
mP.revStyle = 1;
mP.revInt = 10;
mP.warpSteps = 15;
mP.preload = true;
mP.divIds = new Array("popupcontainer", "popupcontent", "popupcontdouble", "popupbottom", "popupboxmodeltest");
//mP.tTags = new Array("a", "img");	//old
mP.tTags = new Array("tr", "img");
mP.setAttNull = true;
mP.customAtt = "hoverinfo";
mP.useTables = false;
mP.defZindex = 100;
mP.defWidth = "200px";
mP.defCSS = new Array("border", "4px solid black", "padding", "6px", "backgroundColor", "#BBBBBB", "color", "black", "fontSize", "12px", "filter", "alpha(opacity=90)", "opacity", ".90", "textAlign", "center", "width", "auto", "height", "auto");
var TestW3DOM = (document.createElement && document.getElementsByTagName && document.getElementById);
var pcR = new Array(), gV = new Array(), aOb = new Array();
mP.revEvals = new Array(null, "\"rect(\"+(clipYTarget-aOb.clipY)+\"px, \"+(clipXTarget+aOb.clipX)+\"px, \"+(clipYTarget+aOb.clipY)+\"px, \"+(clipYTarget-aOb.clipY)+\"px)\"", "\"rect(0px, \"+(aOb.clipX*2)+\"px, \"+(clipYTarget*2)+\"px, 0px)\"", "\"rect(0px, \"+(aOb.clipX*2)+\"px, \"+(aOb.clipY*2)+\"px, 0px)\"");
mP.defDesc = "", mP.edgeBufferZone = 30, pcR.hvrdObj = null, aOb.objMovd = null, aOb.clipStep = 0, aOb.warpStep = 0;
aOb.popActv = false, aOb.objMovd = false, gV.xPosEval = "e.clientX + mP.xOfst", gV.activeDelay = mP.popupDelay;
gV.yPosEval = "e.clientY + mP.yOfst", aOb.revInt = new Array(), aOb.prevs = new Array();
addTrigger(window, "load", multipopup);
function multipopup() {
	if (!TestW3DOM) {
		return;
	}
	
	addPopupDiv();
	addTrigger(document, "mousemove", movePopup);
	addTrigger(window, "resize", sizeUpdate);
	scrollUpdate();
	sizeUpdate();
	if (mP.useTables == true) {
		gV.targetTag = "td";
	} else {
		gV.targetTag = "div";
	}
	//alert(gV.targetTag);
	if (mP.tClass != "*") {
		var targetDivs = getElementsByClass(gV.targetTag, mP.tClass);
	} else {
		var targetDivs = new Array(document);
	}
	//alert(targetDivs.length);
	for (var im = 0; im < targetDivs.length; im++) {
		for (var st = 0; st < mP.tTags.length; st++) {
			var targetNodes = targetDivs[im].getElementsByTagName(mP.tTags[st]);
			//alert("targetNodes length: " + targetNodes.length + " : " + mP.tTags[st]);
			for (var i = 0; i < targetNodes.length; i++) {
				var toi = targetNodes[i].getAttribute(mP.attDesc);
				if (toi != null && toi != "") {
					targetNodes[i].setAttribute(mP.customAtt, toi);
					if (mP.setAttNull) {
						targetNodes[i].removeAttribute(mP.attDesc);
					}
					if (!addCheckTrigger(targetNodes[i], "mouseover", writeDescription)) {
						targetNodes[i].onmouseover = writeDescription;
					}
					if (!addCheckTrigger(targetNodes[i], "mouseout", clearDescription)) {
						targetNodes[i].onmouseout = clearDescription;
					}
				}
			}
		}
	}
}
function writeDescription() {
	var tagDescription = this.getAttribute(mP.customAtt);
	if (tagDescription != "") {
		pcR.hvrdObj = this;
		pcR.cDiv.innerHTML = "";
		pcR.cDiv.innerHTML = tagDescription;
		aOb.tHeight = pcR.cDiv.offsetHeight;
		pcR.hvrdFirst = true;
		if (aOb.popActv != true) {
			aOb.revealTimer = window.setTimeout("startrevealPopup()", gV.activeDelay);
		} else {
			if (aOb.clipStep == mP.clipSteps) {
				pcR.tDiv.style.clip = "rect(auto auto auto auto)";
				pcR.tDiv.style.visibility = "visible";
				pcR.hvrdFirst = false;
			}
		}
		if (pcR.hvrdFirst == true && mP.warpSteps > 0) {
			pcR.dDiv.style.height = aOb.tHeight + "px";
			aOb.tPrevHeight = aOb.tHeight;
		}
		window.clearTimeout(aOb.resetDelayTimer);
		window.clearTimeout(aOb.hidePopupTimer);
	}
}
function clearDescription() {
	window.clearTimeout(aOb.revealTimer);
	aOb.hidePopupTimer = window.setTimeout("hidePopup()", mP.hideDelay);
	if (aOb.revealTimer == 0) {
		gV.activeDelay = 0;
	}
	pcR.hvrdObj = null;
	aOb.resetDelayTimer = window.setTimeout("resetPopupDelay()", mP.instPopDur);
	aOb.tPrevHeight = aOb.tHeight;
	aOb.prevs[aOb.prevs.length] = aOb.tHeight;
	if (aOb.warpStep != mP.warpSteps && aOb.warpStep > 0) {
		aOb.tPrevHeight = aOb.widthSet;
	}
	aOb.warpStep = 0;
}
function hidePopup() {
	for (i = 0; i < aOb.revInt.length; i++) {
		window.clearInterval(aOb.revInt[i]);
	}
	aOb.revInt = new Array();
	aOb.warpStep = 0;
	pcR.tDiv.style.visibility = "hidden";
	pcR.cDiv.innerHTML = "";
	pcR.cDiv.innerHTML = mP.defDesc;
	aOb.objMovd = false;
	aOb.popActv = false;
	aOb.clipStep = 0;
	gV.xPosEval = "e.clientX + mP.xOfst";
	gV.yPosEval = "e.clientY + mP.yOfst";
}
function resetPopupDelay() {
	gV.activeDelay = mP.popupDelay;
}
function startrevealPopup() {
	if (pcR.hvrdObj != null) {
		aOb.revealTimer = 0;
		aOb.revInt[aOb.revInt.length] = window.setInterval("revealPopup()", mP.revInt);
	}
}
function movePopup(e) {
	if (pcR.hvrdObj != null || aOb.popActv == true) {
		if (!e) {
			var e = window.event;
		}
		scrollUpdate();
		var divHeight = pcR.tDiv.offsetHeight;
		var divWidth = pcR.tDiv.offsetWidth;
		var yPos = eval(gV.yPosEval);
		var xPos = eval(gV.xPosEval);
		yPos = maximum(minimum(yPos, pcR.height - divHeight - mP.edgeBufferZone), 0);
		xPos = maximum(minimum(xPos, pcR.width - divWidth - mP.edgeBufferZone), 0);
		if (pointCollisionDetect(e.clientX, e.clientY, yPos, xPos + divWidth, yPos + divHeight, xPos, 3)) {
			collisionFix();
			aOb.yPos = eval(gV.yPosEval);
			aOb.xPos = eval(gV.xPosEval);
		} else {
			aOb.yPos = yPos;
			aOb.xPos = xPos;
		}
		pcR.tDiv.style.top = (aOb.yPos + pcR.scrolledY) + "px";
		pcR.tDiv.style.left = (aOb.xPos + pcR.scrolledX) + "px";
		aOb.objMovd = true;
	}
}
function revealPopup() {
	if (aOb.objMovd == true && mP.revStyle == 0) {
		pcR.tDiv.style.visibility = "visible";
		aOb.popActv = true;
	} else {
		if (aOb.objMovd == true && aOb.clipStep < mP.clipSteps) {
			var divHeight = pcR.tDiv.offsetHeight;
			var divWidth = pcR.tDiv.offsetWidth;
			aOb.clipStep++;
			if (aOb.clipStep < mP.clipSteps) {
				var clipYTarget = Math.ceil(divHeight / 2);
				var clipXTarget = Math.ceil(divWidth / 2);
				aOb.clipX = easeOutStepFloor(0, clipXTarget, mP.clipSteps, aOb.clipStep);
				aOb.clipY = easeOutStepFloor(0, clipYTarget, mP.clipSteps, aOb.clipStep);
				pcR.tDiv.style.clip = eval(mP.revEvals[mP.revStyle]);
			} else {
				pcR.tDiv.style.clip = "rect(auto auto auto auto)";
			}
			pcR.tDiv.style.visibility = "visible";
			aOb.popActv = true;
		}
	}
	if (aOb.popActv == true && aOb.warpStep < mP.warpSteps && aOb.clipStep == mP.clipSteps && pcR.hvrdFirst != true) {
		aOb.warpStep++;
		aOb.widthSet = easeOutStepFloor(aOb.tPrevHeight, aOb.tHeight, mP.warpSteps, aOb.warpStep);
		pcR.dDiv.style.height = aOb.widthSet + "px";
	}
}
function pointCollisionDetect(x, y, top, right, bottom, left, boundary) {
	top -= boundary;
	bottom += boundary;
	left -= boundary;
	right += boundary;
	if ((x > left && x < right) && (y > top && y < bottom)) {
		return true;
	}
	return false;
}
function collisionFix() {
	gV.xPosEval = "e.clientX - divWidth - mP.xOfst";
	gV.yPosEval = "e.clientY - divHeight - mP.yOfst";
}
function scrollUpdate() {
	if (self.pageYOffset) {
		pcR.scrolledX = self.pageXOffset;
		pcR.scrolledY = self.pageYOffset;
	} else {
		if (document.documentElement && document.documentElement.scrollTop) {
			pcR.scrolledX = document.documentElement.scrollLeft;
			pcR.scrolledY = document.documentElement.scrollTop;
		} else {
			if (document.body) {
				pcR.scrolledX = document.body.scrollLeft;
				pcR.scrolledY = document.body.scrollTop;
			}
		}
	}
}
function sizeUpdate() {
	if (self.innerWidth) {
		pcR.width = self.innerWidth;
		pcR.height = self.innerHeight;
	} else {
		if (document.documentElement && document.documentElement.clientWidth) {
			pcR.width = document.documentElement.clientWidth;
			pcR.height = document.documentElement.clientHeight;
		} else {
			if (document.body) {
				pcR.width = document.body.clientWidth;
				pcR.height = document.body.clientHeight;
			}
		}
	}
}
function getElementsByClass(targetTag, tagClass) {
	var elementList = document.getElementsByTagName(targetTag);
	//alert("targettag: " + targetTag + " CLASS; " + tagClass);
	var classTag = new Array();
	for (var i = 0; i < elementList.length; i++) {
		
		if (elementList[i].className == tagClass) {
			//alert(elementList[i].className + " " + elementList[i].tagName);
			classTag[classTag.length] = elementList[i];
		}
	}
	return classTag;
}
function addPopupDiv() {
	var ttDiv = new Array();
	var prefix = "";
	if (mP.useDefStyle == true) {
		prefix = "M_";
	}
	for (var i = 0; i < mP.divIds.length; i++) {
		if (document.getElementById(mP.divIds[i]) != null) {
			document.getElementById(mP.divIds[i]).parentNode.removeChild(document.getElementById(mP.divIds[i]));
		}
		ttDiv[i] = document.createElement("div");
		ttDiv[i].id = prefix + mP.divIds[i];
		ttDiv[i].activeStyle = getActiveStyle;
	}
	var c = new Array("margin", "padding", "border", "top", "left");
	for (i = 0; i < c.length; i++) {
		eval("ttDiv[2].style." + c[i] + " = '0px'");
		eval("ttDiv[4].style." + c[i] + " = '0px'");
		eval("ttDiv[0].style." + c[i] + " = '0px'");
	}
	ttDiv[2].style.position = "relative";
	ttDiv[2].style.width = "100%";
	ttDiv[4].style.visibility = "hidden";
	ttDiv[4].style.position = "absolute";
	ttDiv[0].style.visibility = "hidden";
	ttDiv[0].style.position = "absolute";
	ttDiv[1].appendChild(ttDiv[2]);
	ttDiv[0].appendChild(ttDiv[1]);
	ttDiv[0].appendChild(ttDiv[3]);
	document.body.appendChild(ttDiv[0]);
	if (mP.warpSteps > 0) {
		document.body.appendChild(ttDiv[4]);
		ttDiv[1].style.overflow = "hidden";
		ttDiv[4].style.padding = "10px";
		ttDiv[4].style.height = "100px";
		if (ttDiv[4].offsetHeight == 100) {
			mP.warpSteps = 0;
		}
		document.body.removeChild(ttDiv[4]);
	}
	for (var i = 0; i < mP.divIds.length - 1; i++) {
		var bgIm = ttDiv[i].activeStyle("background-image", "backgroundImage");
		if (bgIm.indexOf("url") > -1 && mP.preload == true) {
			preLoadImage(stripURL(bgIm));
		}
	}
	if (window.getComputedStyle && window.getComputedStyle(ttDiv[3], null).getPropertyValue("background-image").indexOf("url") == -1) {
		ttDiv[0].removeChild(ttDiv[3]);
	} else {
		if (ttDiv[3].currentStyle && (ttDiv[3].currentStyle.backgroundImage.indexOf("url") == -1 && ttDiv[3].currentStyle.filter.indexOf("AlphaImageLoader") == -1)) {
			ttDiv[0].removeChild(ttDiv[3]);
		}
	}
	ttDiv[0].onmouseover = collisionFix;
	if (mP.useDefStyle == true) {
		ttDiv[0].style.width = mP.defWidth;
		ttDiv[0].style.zIndex = mP.defZindex;
		for (var i = 0; i < mP.defCSS.length; i += 2) {
			eval("ttDiv[1].style." + mP.defCSS[i] + "='" + mP.defCSS[i + 1] + "'");
		}
	}
	pcR.cDiv = ttDiv[2];
	pcR.tDiv = ttDiv[0];
	pcR.dDiv = ttDiv[1];
}
function easeOutStepFloor(minValue, maxValue, totalSteps, actualStep) {
	var delta = maxValue - minValue;
	var radEnd = Math.PI / 2;
	var step = minValue + (Math.sin(((radEnd / totalSteps) * actualStep)) * delta);
	return Math.floor(step);
}
function getActiveStyle(style, stylecc) {
	if (window.getComputedStyle) {
		return window.getComputedStyle(this, null).getPropertyValue(style);
	}
	if (this.currentStyle) {
		return eval("this.currentStyle." + stylecc);
	}
}
function stripURL(s) {
	s = s.substring(s.indexOf("url(") + 4, s.lastIndexOf(")"));
	if (s.indexOf("\"") > -1) {
		s = s.substring(s.indexOf("\"") + 1, s.lastIndexOf("\""));
	}
	return s;
}
function addTrigger(elm, eventname, func) {
	if (!addCheckTrigger(elm, eventname, func)) {
		elm.attachEvent("on" + eventname, func);
	}
}
function addCheckTrigger(elm, eventname, func) {
	if (elm.addEventListener) {
		elm.addEventListener(eventname, func, false);
		return true;
	} else {
		return false;
	}
}
function preLoadImage(imageurl) {
	var img = new Image();
	img.src = imageurl;
	return img;
}
function minimum(x, y) {
	if (x < y) {
		return x;
	} else {
		return y;
	}
}
function maximum(x, y) {
	if (x > y) {
		return x;
	} else {
		return y;
	}
}

//My Tips End