rilevare posizione del mouse in FF

**Akito** · 29-09-2006, 17:29

Ciao a tutti.
Ho un piccolo problema: non riesco a rilevare la corretta posizione del mouse dopo un click in firefox 1.5.0.7 per far apparire un tooltip nella posizione corretta (ciòè nelle vicinanze della parola ad esso collegata).

Posto il codice per farvi capire:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.tooltiplink {
text-decoration: none;
color:#996699;
}

.tooltiplink:hover {
text-decoration: underline;
color:#996699;
}

.tooltiplink:visited {
color:#99CC99;
}

.tooltipdiv {
display: none;
position: absolute;
width: 150px;
border: 1px solid #000000;
background-color: #CCCCCC;
margin: 0px;
padding: 4px;
}

</style>
<script type="text/javascript">

var mouse_X=0;
var mouse_Y=0;
var ie = document.all?true:false;
if (!ie) document.captureEvents(Event.MOUSEMOVE)
document.onclick = getMouseXY;

function showtooltip(obj) {
document.getElementById(obj).style.display = "block";
getMouseXY(obj);
document.getElementById(obj).style.left = mouse_X + 10;
document.getElementById(obj).style.top = mouse_Y + 10;
}

function hidetooltip(obj) {
document.getElementById(obj).style.display = "none";
}

function getMouseXY(e) {
//ie = document.all?true:false;
if (ie) { // grab the x-y pos.s if browser is IE
mouse_X = event.clientX + document.body.scrollLeft;
mouse_Y = event.clientY + document.body.scrollTop;
} else { // grab the x-y pos.s if browser is NS
//document.captureEvents(Event.MOUSECLICK);
mouse_X = e.pageX;
mouse_Y = e.pageY;
}
if (mouse_X < 0){mouse_X = 0;}
if (mouse_Y < 0){mouse_Y = 0;}
//document.getElementById(obj).style.left = mouse_X + 10;
//document.getElementById(obj).style.top = mouse_Y + 10;
}

</script>
</head>

<body>

Questo e' un tooltip.

<div id="tt001" class="tooltipdiv"><h6>Tooltip Close</h6>

Un tooltip e' una finestrella che fornisce informazioni aggiuntive. Questo modello ha anche i link.</p></div>
</body>
</html>

Provate il file con IE e FF e vedrete subito il problema.

Vi ringrazio in anticipo per le risposte.
Ciao
Akito

**Mega69** · 30-09-2006, 17:20

Codice javascript

codice:

function coord(evt)
{ 
evt=(evt)?evt:window:event;
if(!window.event) { 
coordX=evt.pageX;
coordY=evt.pageY;
}
else
{
coordX=evt.clientX+document.body.scrollLeft;
coordY=evt.clientX+document.body.scrollTop;
}
// Fai quello che devi fare con coordX e coordY
}

codice:

<body onmousemove="coord(e);">

Purtroppo non ho il tempo di testarla, dillo se è sbagliata

**Akito** · 02-10-2006, 08:58

Grazie della risposta,
ho provato ad adattare il tuo codice ma non va, ora non funziona nemmeno sotto IE.
Forse sbaglio il posto dove scrivere la funzione che viene chiamata all'attivazione dell'evento oppure il modo di accedere alle coordinate del mouse in FF deve essere scritto in un'altra maniera. Se trovi il tempo di testarla e funziona, fammi sapere intanto continuerò a cercare in rete una soluzione.

Grazie
Ciao
Akito

**Akito** · 02-10-2006, 10:08

Dopo diverse prove ho capito che il problema non sta nella rilevazione della posizione del mouse ma nella assegnazione degli stili left e top che in FF DEVONO essere stringhe e non interi (su IE non fa differenza, li prende comunque giusti).
Usando però il seguente codice, che ora posiziona il tooltip, c'è un problema nel posizionamento stesso: sembra che nell'assegnamento della posizione venga usata la posizione del mouse precedente e non quella dell'ultimo click effettuato.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.tooltiplink {
text-decoration: none;
color:#996699;
}

.tooltiplink:hover {
text-decoration: underline;
color:#996699;
}

.tooltiplink:visited {
color:#99CC99;
}

.tooltipdiv {
display: none;
position: absolute;
width: 150px;
border: 1px solid #000000;
background-color: #CCCCCC;
margin: 0px;
padding: 4px;
}

</style>
<script type="text/javascript">
var mouse_X=0;
var mouse_Y=0;
var ie = document.all?true:false;
if (!ie) document.captureEvents(Event.MOUSECLICK)
//document.onclick = getMouseXY;
document.onclick = doSomething;

function showtooltip(obj) {
doSomething();
document.getElementById(obj).style.display = "block";
document.getElementById(obj).style.left = (mouse_X + 10)+"px";
document.getElementById(obj).style.top = (mouse_Y + 10)+"px";
}

function hidetooltip(obj) {
document.getElementById(obj).style.display = "none";
}

function doSomething(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft; // + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop; // + document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
mouse_X = posx;
mouse_Y = posy;
}
</script>
</head>

<body>

Questo e' un tooltip.</p>
<div id="tt001" class="tooltipdiv"><h6>Tooltip Close</h6>

Un tooltip e' una finestrella che fornisce informazioni aggiuntive. Questo modello ha anche i link.</p></div>
</body>
</html>

Qualcuno sa dirmi il perchè ? C'è una soluzione al problema ?
Spero di si.
Ciao
Akito

**Akito** · 02-10-2006, 10:28

Dopo aver constatato che la gestione degli eventi in javascript fa veramente schifo, ho trovato una soluzione funzionante correttamente. Per non far impazzire altri come è successo a me, posto il codice per creare tooltip. Eccolo:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<style type="text/css">
.tooltiplink {
text-decoration: none;
color:#996699;
}

.tooltiplink:hover {
text-decoration: underline;
color:#996699;
}

.tooltiplink:visited {
color:#99CC99;
}

.tooltipdiv {
display: none;
position: absolute;
width: 150px;
border: 1px solid #000000;
background-color: #CCCCCC;
margin: 0px;
padding: 4px;
}

</style>
<script type="text/javascript">
var mouse_X=0;
var mouse_Y=0;
var nomeobj="";
var ie = document.all?true:false;
if (!ie) document.captureEvents(Event.MOUSECLICK)
document.onclick = doSomething;

function showtooltip(obj) {
nomeobj = obj;
}

function hidetooltip(obj) {
nomeobj="";
document.getElementById(obj).style.display = "none";
}

function doSomething(e) {
var posx = 0;
var posy = 0;
if (!e) var e = window.event;
if (e.pageX || e.pageY) {
posx = e.pageX;
posy = e.pageY;
}
else if (e.clientX || e.clientY) {
posx = e.clientX + document.body.scrollLeft; // + document.documentElement.scrollLeft;
posy = e.clientY + document.body.scrollTop; // + document.documentElement.scrollTop;
}
// posx and posy contain the mouse position relative to the document
// Do something with this information
mouse_X = posx;
mouse_Y = posy;
if(nomeobj!="") {
document.getElementById(nomeobj).style.display = "block";
document.getElementById(nomeobj).style.left = (mouse_X + 10)+"px";
document.getElementById(nomeobj).style.top = (mouse_Y + 10)+"px";
}
}
</script>
</head>

<body>

Questo e' un tooltip.</p>
<div id="tt001" class="tooltipdiv"><h6>Tooltip Close</h6>

Un tooltip e' una finestrella che fornisce informazioni aggiuntive. Questo modello ha anche i link.</p></div>
</body>
</html>

Vi consiglio di non scrivere troppo testo all'interno dei tooltip perchè essendo in display:none, alcuni motori di ricerca come google, penalizzano tale testo per il posizionamento.

Buon divertimento
Ciao
Akito

Discussione: rilevare posizione del mouse in FF

Strumenti discussione

Ricerca discussione

Visualizza

rilevare posizione del mouse in FF

Permessi di invio