Rilevare cordinate mouse all'interno di contenitore

**mancarius** · 02-10-2008, 00:35

Ciao ragazzi, vorrei sapere se si possono ottenere le cordinate del mouse all'interno di un contenitore con posizionamento relativo, e ovviamente se si come??

**fcaldera** · 02-10-2008, 09:37

basta fare una ricerca anche su google

codice:

function getEventMousePos(el, e) {
    var iScrollX = document.body.scrollLeft || document.documentElement.scrollLeft;
    var iScrollY = document.body.scrollTop || document.documentElement.scrollTop;

    if (e.currentTarget) {
        var pos = getElementPos(el);
	 return {
		x : e.clientX - pos.x + iScrollX,
		y : e.clientY - pos.y + iScrollY
	}

    }

    return {
		x : e.offsetX,
		y : e.offsetY
    }
}


function getElementPos(el) {
    var x = el.offsetLeft;
    var y = el.offsetTop;
    var parent = el.offsetParent;
    
    while (parent) {
	 x += parent.offsetLeft;
	 y += parent.offsetTop;
	 parent = parent.offsetParent;
    }

    return {
	 x : x,
	 y : y
    }
}


...

/* crei un riferimento al contenitore */
var tuocontenitore = document.getElementById('id-contenitore');


/* all'evento 'mousemove' sul contenitore ricavi le coordinate */
coords = getEventMousePos(tuocontenitore)

/* le coordinate sono coords.x e coords.y */

**fcaldera** · 02-10-2008, 09:58

giusto per darti un esempio funzionante, copia e incolla

codice:

<!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" lang="it" xml:lang="it">
<head>

<script type="text/javascript">
// <![CDATA[
 
function getEventMousePos(el, e) {
    var iScrollX = document.body.scrollLeft || document.documentElement.scrollLeft;
    var iScrollY = document.body.scrollTop || document.documentElement.scrollTop;

    e = e || window.event;
    if (e.currentTarget) {
        var pos = getElementPos(el);
        return {
            x : e.clientX - pos.x + iScrollX,
            y : e.clientY - pos.y + iScrollY
	    }

    }

    return {
		x : e.offsetX,
		y : e.offsetY
    }
}


function getElementPos(el) {
    var x = el.offsetLeft;
    var y = el.offsetTop;
    var parent = el.offsetParent;
    
    while (parent) {
	 x += parent.offsetLeft;
	 y += parent.offsetTop;
	 parent = parent.offsetParent;
    }

    return {
	 x : x,
	 y : y
    }
}


window.onload = function() {

    /* crei un riferimento al contenitore */
    var tuocontenitore = document.getElementById('cnt');
    /* all'evento 'mousemove' sul contenitore ricavi le coordinate */
    tuocontenitore.onmousemove = function(e) {
        var coords = getEventMousePos(tuocontenitore, e);
        document.getElementById('coordx').value = coords.x;
        document.getElementById('coordy').value = coords.y;
    }
}
// ]]>
</script>
</head>
    
<body>	
    <div style="width: 500px; height: 300px; background: #f4f4f9; position: relative;" id="cnt"> 
        x: <input type="text" id="coordx" />

        y: <input type="text" id="coordy" />
    </div>
</body>
</html>

Ciao

**mancarius** · 02-10-2008, 10:27

Sicuramente su google si può trovare qualsiasi cosa, ma visto che ne ho la possibilità preferisco consultarmi con voi che tante volte avete da offrire tante piccole perle

comunque grazie mille per l'aiuto, ora lo provo

Discussione: Rilevare cordinate mouse all'interno di contenitore

Strumenti discussione

Ricerca discussione

Visualizza

Rilevare cordinate mouse all'interno di contenitore

Permessi di invio