+ Rispondi alla Discussione
Risultati da 1 a 4 di 4

[Javascript] Coordinate mouse elemento specifico

Ultimo Messaggio di chalda il:
  1. #1
    User L'avatar di chalda
    Data Registrazione
    May 2006
    Località
    Primiero
    Messaggi
    88

    [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
    Non credo alle firme.

  2. #2
    User L'avatar di grandepinna
    Data Registrazione
    Sep 2006
    Messaggi
    26
    Citazione Originariamente Scritto da chalda
    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

  3. #3
    Moderatore L'avatar di claudioweb
    Data Registrazione
    Jul 2005
    Località
    Salento
    Messaggi
    3,703

    posizione del mouse relativa ad un elemento / box / div

    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...

    Codice 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>
    Ciao

    Si avvicina la Festa della Mamma.

  4. #4
    User L'avatar di chalda
    Data Registrazione
    May 2006
    Località
    Primiero
    Messaggi
    88
    Esatto, proprio quello che cercavo!
    Grazie mille!

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

+ Rispondi alla Discussione

Tag per Questa Discussione

^ Permessi di Scrittura

  • Tu non puoi inviare nuove discussioni
  • Tu non puoi inviare risposte
  • Tu non puoi inviare allegati
  • Tu non puoi modificare i tuoi messaggi
  •  
  • Il codice BB è Attivato
  • Le faccine sono Attivato
  • Il codice [IMG] è Attivato
  • Il codice [VIDEO] è Attivato
  • Il codice HTML è Disattivato
  • Trackbacks Attivato
  • Pingback Attivato
  • Refback Attivato

SEO by vBSEO 3.6.0 PL2 ©2011, Crawlability, Inc.