[Javascript] Coordinate mouse elemento specifico

chalda

[Javascript] Coordinate mouse elemento specifico

Domanda secca:
E' possibile ricavare le coordinate del mouse in un div con posizione relativa?
Cioè, non le coordinate del mouse nella pagina, ma in un div.
Ero sicuro di averlo fatto una volta... ma non trovo più nulla...

Grazie e Ciaps

grandepinna

@chalda said:

Domanda secca:
E' possibile ricavare le coordinate del mouse in un div con posizione relativa?
Cioè, non le coordinate del mouse nella pagina, ma in un div.
Ero sicuro di averlo fatto una volta... ma non trovo più nulla...

Grazie e Ciaps

bella domanda!
io non conosco la risposta ma entro nel clan di chi la vorrebbe sapere

claudioweb

Visto l'argomento interessante posto il codice di una pagina completa (versione modificata di questa weston.canncentral.org/web_lab/onmousemove/test.html )

E' un utile spunto / codice già pronto...

[HTML]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
<style>
#div1 {
width: 190px;
border: 1px solid yellow;
height: 400px;
position: relative;
float: right;
}

form {
border: 1px solid gray;
margin: 0 200px;
}

</style>
</head>
<body>
<div id="div1"> BOX </div>
<form name="readout">
docmousepos:
<input name="docmousepos" value=" "/>
<br/>
divmousepos:
<input name="divmousepos" value=" "/>
</form>
<script type="text/javascript" language="javascript">
<!--//
function displayDocMouseCoords(e)
{
coords = getMouseCoordsWithinEventTarget(e);
document.readout.docmousepos.value = coords.x + ', ' + coords.y;
}

document.onmousemove = displayDocMouseCoords;

function displayDivMouseCoords(e)
{
coords = getMouseCoordsWithinEventTarget(e);
document.readout.divmousepos.value = coords.x + ', ' + coords.y;
}

divOne = document.getElementById('div1');
divOne.onmousemove = displayDivMouseCoords;

function getMouseCoordsWithinEventTarget(event)
{
var coords = { x: 0, y: 0};

    if(!event) // then we have a non-DOM (probably IE) browser
    {
            event = window.event;
            coords.x = event.offsetX;
            coords.y = event.offsetY;
    }
    else       // we assume DOM modeled javascript
    {
            var Element = event.target ;
            var CalculatedTotalOffsetLeft = 0;
            var CalculatedTotalOffsetTop = 0 ;

            while (Element.offsetParent)
            {
                    CalculatedTotalOffsetLeft += Element.offsetLeft ;     
                    CalculatedTotalOffsetTop += Element.offsetTop ;
                    Element = Element.offsetParent ;
            }

            coords.x = event.pageX - CalculatedTotalOffsetLeft ;
            coords.y = event.pageY - CalculatedTotalOffsetTop ;
    }

    return coords;

}

function getPageCoords(emt)
{
var coords = {x: 0, y: 0};
while (emt)
{
coords.x += emt.offsetLeft;
coords.y += emt.offsetTop;
emt = emt.offsetParent;
}
return coords;
}

function isElement(node)
{ return (node.nodeType == 1); }
-->
</script>
</body>
</html>[/HTML]
Ciao

chalda

Esatto, proprio quello che cercavo!
Grazie mille!

(tra l'altro in quel sito ci sono molti script utili... un po' nascosti magari....)