Newsgroup: it.comp.lang.javascript
Titolo: Posizionamento tooltip

Scusate se rompo, è la prima volta! :)
Da un pò di tempo sono in lotta con un benedetto script che mi posiziona 
un tooltip in una pagina.
Bene, lal cosa strana è che in alcune pagine funziona ed in altre no.
Ad esempio qui 
http://enricofedele.kudolink.com/FAQ-index-req-ShowFaq-id_cat-1.phtml
non funziona correttamente. Il testo viene visualizzato, ma non nella 
posizione voluta (accanto al mouse).
Per quello che voglio fare, overlib non mi è sufficiente, e per il 
posizionamento uso questo lo script che vi riporto sotto. Non l'ho 
scritto io, ma l'ho trovato così su internet e non essendoci commenti, e 
avendo le variabili nomi incomprensibili (spesso) non è che ci capisca 
molto (aggiungeteci che nn è che sia un dio di javascript).
Qualcuno di vooi potrebbe cortesemente aiutarmi? grassie
var DH = 0;
var an = 0;
var al = 0;
var ai = 0;
if (document.getElementById) {
	ai = 1; DH = 1;
} else {
	if (document.all) {
		al = 1; DH = 1;
	} else {
		browserVersion = parseInt(navigator.appVersion);
		if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion 
== 4)) {
			an = 1; DH = 1;
		}
	}
}
function fd(oi,ws) {
	if (ws == 1) {
		if (ai) {
			return (document.getElementById(oi).style);
		} else {
			if (al) {
				return (document.all[oi].style);
			} else {
				if (an) {
					return (document.layers[oi]);
				}
			};
		}
	} else {
		if (ai) {
			return (document.getElementById(oi));
		} else {
			if (al) {
				return (document.all[oi]);
			} else {
				if (an) {
					return (document.layers[oi]);
				}
			};
		}
	}
}	//	closes fd function
function pw() {
	if (window.innerWidth != null)
		return window.innerWidth;
 
	if (document.body.clientWidth != null)
		return document.body.clientWidth; return (null);
}	//	closes pd function
//	displays the ToolTip
//	clicking variable must be set to true when monitoring onclick event
function popUp(evt,oi,clicking) {
 
	var browserName=navigator.appName;
	//	if the browser ain't netscate, or firefox... we don't need to 
re-execute the function
	//	so we exit here (this works with Opera 7.01 too)
	if (browserName!="Netscape" && clicking=="true") {
		return(false);
	}
 
	//	the browser is Netscape or similar, so we repeat the function
	if (DH) {
		var wp = pw();
		ds = fd(oi,1);
		dm = fd(oi,0);
		st = ds.visibility;
		if (dm.offsetWidth)
			ew = dm.offsetWidth;
		else if (dm.clip.width)
			ew = dm.clip.width;
		if (st == "visible" || st == "show") {
			ds.visibility = "hidden";
		} else  {
			if (evt.y || evt.pageY) {
			if (evt.pageY) {
					tv = evt.clientY + 20;
					lv = evt.clientX - (ew/4);
				} else {
					tv = evt.y + 20 + document.body.scrollTop;
					lv = evt.x  - (ew/4) + document.body.scrollLeft;
				}
				if (lv < 2)
					lv = 2;
				else if (lv + ew > wp)
					lv -= ew/2;
				if (!an) {
					lv += 'px';
					tv += 'px';
				}
				ds.left = lv;
				ds.top = tv;
			}
			ds.visibility = "visible";
		}
	}
}	//	closes popUp function
//	this detects users browser and then exit tooltip in the right way
function ExitBr(fc) {
	var browserName=navigator.appName;
	if (browserName=="Netscape") {
		popUp(event,'t_'+fc);
	}
}

 un tooltip in una pagina.
[CUT]
prova questo. L'ho scritto io e se ti viene qualche miglioria, fammela 
sapere.
var curx = 0;
var cury = 0;
// Main function to retrieve mouse x-y pos.s
function getMouseXY(e) {
   if (IE) { // grab the x-y pos.s if browser is IE
     curx = event.clientX + document.body.scrollLeft;
     cury = event.clientY + document.body.scrollTop;
   } else {  // grab the x-y pos.s if browser is NS
     curx = e.pageX;
     cury = e.pageY;
   }
   // catch possible negative values in NS4
   if (curx < 0){curx = 0};
   if (cury < 0){cury = 0};
   return true;
}
/* Identifico il nome dell' oggetto container piu' esterno, solitamente
  * un <div>. */
var _CONTAINER_NAME = "container";
function show(id, show){
   var obj = document.getElementById(id);
   var contW = document.getElementById(_CONTAINER_NAME).clientWidth;
   var contH = window.innerHeight;
   if (show) {
     obj.style.top = (contH-cury+20>=obj.clientHeight?
         cury+20: contH-obj.clientHeight)+'px';
     obj.style.left = (contW-curx>=150?curx:curx-150)+'px';
     obj.style.display = 'block';
     var info;
   } else {
     obj.style.display = 'none';
   }
}
Per funzionare si presuppone che l'elemento che contiene la pagina si 
chiami container (id intendo). Se si chiama in un altro modo, basta che 
correggi _CONTAINER_NAME.
Si usa cosi':
<img src="images/generica.gif" alt="Immagine"
     onMouseOver="show('default', true);"
     onMouseOut="show('default', false);" />
Funziona con <img> ma anche con <div> e gli altri elementi.
Il parametro id della function riceve l'ID dell'elemento da aprire.
show indica se aprire (true) o chiudere(false) l'elemento.
Chiaro???
Ecco un esempio:
<script>
   // qui vanno gli script
</script>
<style>
   div.popup{
     z-index  : 4;
     background-color : #ffc;
     display  : none;
     border   : #000 1px solid;
     position : absolute;
   }
</style>
<div id="default" class="popup">
   <h3>Azioni</h3>
   <table>
     <tr>
       <td><img src="images/generica.gif"></td>
       <td>Imposta come predefinita.</td>
     </tr>
     <tr>
       <td><img src="images/default.gif"></td>
       <td>Stampante predefinita.</td>
     </tr>
   </table>
</div>
<div onMouseOver="show('default', true);"
     onMouseOut="show('default', false);" >
   ciao a tutti!
</div>
Ciao.
-- 
            Davide Gurgone
      web: 
http://www.gurgone.it/
mail: davidechiocciolinagurgonepuntoit