• User

    [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


  • User

    @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 :vaiii:


  • Super User

    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 :ciauz:


  • User

    Esatto, proprio quello che cercavo!
    Grazie mille!

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