Div che insegue il mouse.

**andbaz** · 11-07-2011, 18:28

Sto cercando uno script, anche in php, che mi permetta solo nell'evento onmouseover la comparsa di un div, e che questo insegua il mouse in modo fisso, senza animazioni o rallentamenti.

Sapreste dirmi come fare, o indicarmi una guida o tutorial? Grazie

Non sono pigro, nel web ho già cercato, però non trovo quello che cerco.

**andbaz** · 14-07-2011, 22:38

UP

**carlomarx** · 15-07-2011, 02:35

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio Tooltip</title>
<script type="text/javascript">
var oTooltip = new (function() {
	var nOverX, nOverY, nLeftPos, nTopPos, oNode, bOff = true;
	this.follow = function (oMsEvnt1) {
		if (bOff) { return; }
		if (!oMsEvnt1) {  oMsEvnt1 = window.event; }
		var nMoveX =  oMsEvnt1.clientX, nMoveY =  oMsEvnt1.clientY;
		nLeftPos += nMoveX - nOverX; nTopPos += nMoveY - nOverY;
		oNode.style.left = nLeftPos + "px";
		oNode.style.top = nTopPos + "px";
		nOverX = nMoveX; nOverY = nMoveY;
	},
	this.remove = function () {
		if (bOff) { return; }
		bOff = true; document.body.removeChild(oNode);
	};
	this.append = function (oMsEvnt2, sTxtContent) {
		if (!oMsEvnt2) { oMsEvnt2 = window.event; }
		oNode.innerHTML = sTxtContent;
		if (bOff) { document.body.appendChild(oNode); bOff = false; }
		var nScrollX = document.documentElement.scrollLeft || document.body.scrollLeft, nScrollY = document.documentElement.scrollTop || document.body.scrollTop, nWidth = oNode.offsetWidth, nHeight = oNode.offsetHeight;
		nOverX = oMsEvnt2.clientX; nOverY = oMsEvnt2.clientY;
		nLeftPos = document.body.offsetWidth - nOverX - nScrollX > nWidth ? nOverX + nScrollX + 10 : document.body.offsetWidth - nWidth + 16;
		nTopPos = nOverY - nHeight > 6 ? nOverY + nScrollY - nHeight - 7 : nOverY + nScrollY + 20;
		oNode.style.left = nLeftPos + "px";
		oNode.style.top = nTopPos + "px";
	};
	this.init = function() {
		oNode = document.createElement("div");
		oNode.setAttribute("class", "tooltip");
		oNode.style.position = "absolute";
	};
})();
</script>
<style type="text/css">
div.tooltip {
	padding: 6px;
	background: #ffffff;
	border: 1px #76808C solid;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	z-index: 9999;
}
</style>
</head>

<body onload="oTooltip.init();">


Passa il mouse su questo link!!!!</p>


...oppure passalo su questo qui!!</p>
</body>
</html>

**andbaz** · 15-07-2011, 09:29

Ciao, potresti spiegarmi che risultato verrebbe fuori precisamente con questo script? GRAZIE

**carlomarx** · 15-07-2011, 11:27

Verrebbe fuori esattamente quello che chiedi, se ho capito bene... cmq te lo rigiro corretto (c'erano alcune piccole sbavature, ma niente di vitale):

codice:

<!doctype html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Esempio Tooltip</title>
<script type="text/javascript">
var oTooltip = new (function() {
	var nOverX, nOverY, nLeftPos, nTopPos, oNode, bOff = true;
	this.follow = function (oMsEvnt1) {
		if (bOff) { return; }
		if (!oMsEvnt1) {  oMsEvnt1 = window.event; }
		var nMoveX =  oMsEvnt1.clientX, nMoveY =  oMsEvnt1.clientY;
		nLeftPos += nMoveX - nOverX; nTopPos += nMoveY - nOverY;
		oNode.style.left = nLeftPos + "px";
		oNode.style.top = nTopPos + "px";
		nOverX = nMoveX; nOverY = nMoveY;
	};
	this.remove = function () {
		if (bOff) { return; }
		bOff = true; document.body.removeChild(oNode);
	};
	this.append = function (oMsEvnt2, sTxtContent) {
		if (!oMsEvnt2) { oMsEvnt2 = window.event; }
		oNode.innerHTML = sTxtContent;
		if (bOff) { document.body.appendChild(oNode); bOff = false; }
		var nScrollX = document.documentElement.scrollLeft || document.body.scrollLeft, nScrollY = document.documentElement.scrollTop || document.body.scrollTop, nWidth = oNode.offsetWidth, nHeight = oNode.offsetHeight;
		nOverX = oMsEvnt2.clientX; nOverY = oMsEvnt2.clientY;
		nLeftPos = document.body.offsetWidth - nOverX - nScrollX > nWidth ? nOverX + nScrollX + 10 : document.body.offsetWidth - nWidth + 16;
		nTopPos = nOverY - nHeight > 6 ? nOverY + nScrollY - nHeight - 7 : nOverY + nScrollY + 20;
		oNode.style.left = nLeftPos + "px";
		oNode.style.top = nTopPos + "px";
	};
	this.init = function() {
		oNode = document.createElement("div");
		oNode.setAttribute("class", "tooltip");
		oNode.style.position = "absolute";
	};
})();
</script>
<style type="text/css">
div.tooltip {
	padding: 6px;
	background: #ffffff;
	border: 1px #76808C solid;
	border-radius: 5px;
	-moz-border-radius: 5px;
	-webkit-border-radius: 5px;
	z-index: 9999;
}
</style>
</head>

<body onload="oTooltip.init();">


Passa il mouse su questo link!!!!</p>


...oppure passalo su questo qui!!</p>
</body>
</html>

Discussione: Div che insegue il mouse.

Strumenti discussione

Ricerca discussione

Visualizza

Div che insegue il mouse.

Permessi di invio