Printable View
Avrei bisogno di sapere la posizione del mouse all'interno di un DIV.
Quando premo il pulsante del mouse sopra un DIV richiamo una procedura JS.
Ora avrei bisogno di recuperare la distanza del mouse dal bordo superiore del DIV in questione. Si puo' fare ?
GRAZIE
In javascript utilizzando la crasse event puoi prendere le coordinate del mouse in questo modo:
Purtroppo questo codice non è compatibile con tutti i browser.Codice HTML:event.clientX <!-- Coordinate X del mouse -->
event.clientY <!-- Coordinate Y del mouse -->
Mentre per calcolarti la distanza dal bordo superiore del div al mouse credo che di basti fare questo piccolo calcolo ( presumendo che il div abbia un'id ):
Codice HTML:event.clientX - document.getElementById("id_elemento").style.top
@sevenjeak: il tuo metodo non è sbagliato, ma se si tratta di un elemento che ha posizione assoluta/relativa/etc.. ?
@esotica:
Prova con questo codice:
E' soltanto un esempio, quindi adattalo come vuoi :)Codice:window.onload = function() {
document.getElementById('id').onmousemove = function(e) {
e = e || event;
var x = e.clientX - this.offsetLeft, y = e.clientY - this.offsetTop;
this.innerHTML = x + ' - ' + y;
}
}
GRAZIEEEE
PERFETTO !!! Quasi
Ho fatto una pagina di prova
Se provi NON funziona.Codice:<!DOCTYPE html>
<html>
<head>
<style>
div.riquadro { width:220px; height:170px; margin;10px; margin-right:50px;
background:yellow; border:2px groove; float:right; }
p { margin:0; margin-left:10px; color:red; width:220px;
height:120px; padding-top:70px;
float:left; font-size:14px; }
span { display:block; }
</style>
<script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
<div style='padding-top:30px;background-color:red;'>
<div style='padding-top:30px;background-color:green;'>
<table>
<tr><td>
<div id='id' style='width:400px; height:500px; background-color:gray;'>
ciao
<script type="text/javascript">
window.onload = function() {
document.getElementById('id').onmousemove = function(e) {
e = e || event;
var x = e.clientX - this.offsetLeft, y = e.clientY - this.offsetTop;
this.innerHTML = x + ' - ' + y;
}
}
</script>
</div>
<div>ALTRO METODO CHE HO TROVATO IN GIRO ... UTILIZZANDO JQUERY</div>
<p>
Try scrolling too.
<span>Move the mouse over the div.</span>
<span> </span>
</p>
<div class='riquadro'></div>
<script>
$("div").mousemove(function(e){
var pageCoords = "( " + e.pageX + ", " + e.pageY + " )";
var clientCoords = "( " + e.clientX + ", " + e.clientY + " )";
$("span:first").text("( e.pageX, e.pageY ) - " + pageCoords);
$("span:last").text("( e.clientX, e.clientY ) - " + clientCoords);
});
</script>
<div>FINE DEL METODO "JQUERY" ... ANCHE QUESTO NON FUNZIONA IN IE (ALMENO NEL 7)</div>
</td></tr>
</table>
</div>
</div>
</body>
</html>
Se togli i TAG della TABELLA, FUNZIONA !
Come mai ?
@mycarlo: Non avevo considerato il fatto che l'elemento non potesse avere la proprietà position.
Cmq a me funziona perfettamente, forze e il div all'interno della tabella, non mi vorrei sbagliare, ma non vedo dove lo chiudi
effettivamente non c'e' chiusura ... pero' NON cambia molto.
con FF basta recuperare l'offset della tabella. Con IE, ahime', bisogna recuperare tutti gli elementi precedenti alla stessa.
la pagina dove mi servirebbe sapere la posizione ha questa struttura
<DIV> <- globale
...<div TOP> <- titolo del sito (o logo)
...</div TOP>
...<DIV globale2> <- contenitore del corpo pagina
... ...<div SINISTRA> <- colonna di sinistra
... ...</div SINISTRA>
... ...<div CENTRO> <- colonna di CENTRO
... ... ...<div RIQUADRO SUPERIORE> <- come il top (titolo della pagina
... ... ...</div RIQUADRO SUPERIORE>
... ... ...<div RIQUADRO INFO>
... ... ... ... <TABLE> <- tabella di cui parlavo prima
... ... ... ... ...<DIV> <- di cui sapere la posizione
... etc
Ora dicevo in FF mi basta sapere l'offset del DIV + l'offset del TD + l'offset della TABLE e ho la mia posizione del DIV.
In IE, mannaggia, mi mancano tutti gli elementi gia' chiusi che occupano spazio al di sopra. Nella mia pagina e' il DIV TOP.
C'e' una soluzione ?
alla fine ho utilizzato
this.offsetTop -> per la poszione dell'oggetto (e ho aggiunto l'offset del TD e della TABLE per quanto visto sopra).
faccio il confronto con la posizione del mouse e tutto fila lisco.
Ho trovato un altro problema con gli elementi select:
-quando schiaccio sopra per far visualizzare il "menù a tendina", mi dà la posizione corretta del mouse
-quando schiaccio sopra a un'opzione, la posizione del mouse (e.pageY) NON e' corretta (nell'esempio e' inferiore di 125 pixel in entrambi)
Come mai ?
QUESTO l'HTML:
Codice HTML:
<!DOCTYPE HTML PUBLIC '-//W3C//DTD HTML 4.01 Transitional//EN' 'http://www.w3.org/TR/html4/loose.dtd'>
<head>
<meta http-equiv='Content-Type' content='text/html; charset=ISO-8859-1' >
<script type='text/Javascript' src='zprova.js'></script>
<link rel='stylesheet' type='text/css' href='zprova.css'>
</head>
<body>
<table class='prova' style='border='1px solid black;'
onmousemove="function m_pos(e) {document.prova.uno.value=e.pageY;}m_pos(event);"
onclick="function c_pos(e) {document.prova.due.value=e.pageY;}c_pos(event);">
<tr><td class='mappa'>
<div class='contenitore'>*MAPPA*
<br>
<form name='prova'>
posizione mouse [solo coord. Y]<input type='text' name='uno' value='' />
<br>
posizione mouse AL CLICK [solo coord. Y]<input type='text' name='due' value='' />
<br><br>
<div style='font-size:20px;'>
1) Schiacciando nel riquadro a lato "SOTTOMENU'", si apre un <div>.
<br>
2) La posizione del mouse (e anche quando si preme il pulsante) e' corretta.
<br>
3)Se si apre il select (il menu' a tendina), la posizione e' sempre corretta.
<br>
<span style='color:#800000;'>->Se si fa clicxk, la POSIZIONE SBALLA !!!</span>
</div>
</form>
</div>
</td>
<td class='laterale' rowspan='2'>
<div id='menu-2' name='menu-2' class='laterale' onclick="menu_apri(this,'menu-2','21px','',event);">
<div class='titolo'>SOTTOMENU'</div>
<div><ul>
<li class ='testo'>text : </li><li class='singolo'><input type='text' name='nome' value='' /></li><li class='fine'> </li>
<li class='testo'>select : </li><li class='singolo'><select name='direzione'><option value='N8'>Nord</option><option value='N9'>Nord-Est</option><option value='N6'>Est</option><option value='N3'>Sud-Est</option><option value='N2'>Sud</option><option value='N1'>Sud-Ovest</option><option value='N4'>Ovest</option><option value='N7'>Nord-Ovest</option></select></li><li class='fine'> </li>
</ul></div>
</div>
</td></tr>
<tr><td class='legenda'>
<div class='contenitore'>*LEGENDA*</div>
</td></tr>
</table>
</body>
</html>
Questo il CSS
Codice:TABLE.prova {margin:0 auto; padding:0px 5px 0px 5px; width:763px; border:1px solid red; background-color:#A0A0A0;}
TABLE.prova TD {vertical-align:top;}
TABLE.prova TD.mappa {height:550px;}
/* ------------------------------------------------- */
div.laterale {margin:0 auto; margin-bottom:10px; text-align:left; font-size:10px; border:2px outset #B3A17D; color:black; width:192px; height:21px; overflow:hidden;}
DIV.laterale DIV.titolo {height:20px; font-size:15px; font-weight:bold; text-align:center; color:#600000; background-image:url('../immagini/sfondo_mappa_mari_select.jpg');}
DIV.laterale UL {list-style-type:none;margin:0px;padding-left:3px;}
DIV.laterale LI {margin-top:3px; height:15px; line-height:15px;}
DIV.laterale LI.testo {width:65px; float:left;}
DIV.laterale LI.singolo {width:105px; float:left;}
DIV.laterale DIV INPUT[TYPE="text"] {height:11px; width:100px; font-size:10px; border:1px solid black; background-color:transparent;}
DIV.laterale DIV select {text-align:center; height:15px; font-size:10px; width:90px; background-color:transparent; border:1px solid gray;}
DIV.laterale DIV INPUT:focus {border-color: red;}
DIV.laterale DIV INPUT:hover {border-color: red;}
DIV.laterale DIV select:focus {background-color:#B3A17D; border-color: red;}
DIV.laterale DIV select:hover {border-color: red;}
DIV.laterale DIV.termina {clear:both; height:5px; font-size:1px;
background-image:url('../immagini/sfondo_mappa_mari_select.jpg');}
Questo il JS
Codice:/* ------------------------------------------- */
// Apre le sottovoci dei menu' (principale e della mappa dei mari)
// FUNZIONAMENTO: sono div con height impostata a una certa altezza (inferiore
// di tutto il div):
// - per MOSTRARE mette l'altezza a 100%;
// - per NASCONDERE mette l'altezza alla misura inferiore
// impostata nel HTML;
function menu_apri(elemento,gruppo,dimensione,minimo,e) {
// elemento -> l'elemento del DOM su cui si e' premuto il mouse;
// gruppo -> il nome (anche l'id) dell'elemento (uguale per tutti gli elementi dello stesso menu');
// dimensione -> la dimensione a cui ridurre tutti gli elementi (per chiuderli);
// minimo -> la dimensione minima degli elemento da mostrare (serve per IE7 per il menu' spostamento nella mappa dei mari)
var x = 0;
if (elemento.style.height != "100%") {
/* riduce tutti i menu */
var dati = document.getElementsByName(gruppo);
for (x = 0; x < dati.length; x++) {
dati[x].style.height = dimensione;
dati[x].style.minHeight = dimensione;
}
/* mostra elementi del menu */
elemento.style.height="100%";
if (typeof(minimo) == "string") {elemento.style.minHeight = minimo;}
}else{
/* la proprieta "offsetY" NON puo' essere usata perche' da' il valore
dal bordo superiore dell'elemento su cui si e' verificato l'event
(e non dal div che ha richiamato questa funzione) */
/* POSIONE DEL DIV */
/* controlla se l'elemento e' dentro una tabella (-> calcolare la distanza della tabella dal bordo superiore) */
/* il menu' principale e' fuori dalla tabella */
/* i menu' della mappa dei mari sono dentro una tabella */
var padre_td = elemento.offsetParent;
if (padre_td != "[object HTMLBodyElement]") {
var padre_table = padre_td.offsetParent;
var posizione_div = padre_table.offsetTop + padre_td.offsetTop + elemento.offsetTop;
}else{
var posizione_div = elemento.offsetTop;
}
/* POSIONE DEL MOUSE */
/* in IE7 non esiste l'elemento pageY -> allora bisogna sommare alcuni valori */
if (e.pageY) {
var posizione_mouse = e.pageY;
}else{
/* Per tutti i browser che non usano la proprietà "pageY" */
var posizione_mouse = e.clientY + document.body.scrollTop + document.documentElement.scrollTop;
/* ----- [QUESTI BROWSER NON CALCOLANO TUTTI I TAG CHIUSI CHE OCCUPANO SPAZIO
| SOPRA IL DIV] */
/* | */
/* | */ posizione_div = posizione_div + document.getElementById('schema_contenitore_due').offsetTop + document.getElementById('schema_colonna_centrale').offsetTop;
/* ----- [FINE] */
}
/* DIFFERENZA MOUSE - DIV */
var differenza = posizione_mouse - posizione_div;
// CONTROLLO: se e' stato premuto nella parte del titolo o nel corpo
if (differenza < parseInt(dimensione)) {
//alert("differenza ["+differenza+"] - div ["+posizione_div+"] - mouse ["+posizione_mouse+"]");
//alert("mouse ["+posizione_mouse+"] pageY ["+e.pageY+"] - mouse 2 ["+posizione_mouse_2+"]");
elemento.style.height = dimensione;
elemento.style.minHeight = dimensione;
}
}
}
/* ------------------------------------------- */
NB: premendo sopra "SOTTOMENU'" si apre un <div> con dentro la select dove poter provare.
Ho notato che e.pageY (e cosi' anche e.pageX) tiene correttamente la posizione del mouse.
Quando si fa click (in una scelta "select"), questo valore sballa (e nel mio caso e' inferiore di oltre 100 pixel... da' anche un risultato negativo!!!!)