mozilla
Your Search Results

    Element.onmousemove

    « DOM Reference

    Summary

    The onmousemove property returns the mousemove event handler code on the current element.

    Syntax

    element.onmousemove = event handling code
    

    Notes

    The mousemove event is raised when the user moves the mouse.

    Examples

    Example #1: tooltips

    The following example shows the use of the onmousemove event with a javaScript tooltip.

    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Tooltip Example</title>
    <script type="text/javascript">
    var oTooltip = new (function() {
      var nOverX, nOverY, nLeftPos, nTopPos, oNode, bOff = true;
      this.follow = function (oMsEvnt1) {
        if (bOff) { return; }
        var nMoveX =  oMsEvnt1.clientX, nMoveY =  oMsEvnt1.clientY;
        nLeftPos += nMoveX - nOverX; nTopPos += nMoveY - nOverY;
        oNode.style.left = nLeftPos + "px";
        oNode.style.top = nTopPos + "px";
        nOverX = nMoveX; nOverY = nMoveY;
      };
      this.remove = function () {
        if (bOff) { return; }
        bOff = true; document.body.removeChild(oNode);
      };
      this.append = function (oMsEvnt2, sTxtContent) {
        oNode.innerHTML = sTxtContent;
        if (bOff) { document.body.appendChild(oNode); bOff = false; }
        var nScrollX = document.documentElement.scrollLeft || document.body.scrollLeft, nScrollY = document.documentElement.scrollTop || document.body.scrollTop, nWidth = oNode.offsetWidth, nHeight = oNode.offsetHeight;
        nOverX = oMsEvnt2.clientX; nOverY = oMsEvnt2.clientY;
        nLeftPos = document.body.offsetWidth - nOverX - nScrollX > nWidth ? nOverX + nScrollX + 10 : document.body.offsetWidth - nWidth + 16;
        nTopPos = nOverY - nHeight > 6 ? nOverY + nScrollY - nHeight - 7 : nOverY + nScrollY + 20;
        oNode.style.left = nLeftPos + "px";
        oNode.style.top = nTopPos + "px";
      };
      this.init = function() {
        oNode = document.createElement("div");
        oNode.className = "tooltip";
        oNode.style.position = "absolute";
      };
    })();
    </script>
    <style type="text/css">
    div.tooltip {
      padding: 6px;
      background: #ffffff;
      border: 1px #76808C solid;
      border-radius: 5px;
      -moz-border-radius: 5px;
      -webkit-border-radius: 5px;
      z-index: 9999;
    }
    </style>
    </head>
    
    <body onload="oTooltip.init();">
    <p><a href="http://developer.mozilla.org/" onmouseover="oTooltip.append(event,'Example text 1');" onmousemove="oTooltip.follow(event);" onmouseout="oTooltip.remove();">Move your mouse here&hellip;</a></p>
    <p><a href="http://developer.mozilla.org/" onmouseover="oTooltip.append(event,'Example text 2');" onmousemove="oTooltip.follow(event);" onmouseout="oTooltip.remove();">&hellip;or here!!</a></p>
    </body>
    </html>
    

    Example #2: draggable elements

    The following example shows the use of the onmousemove event with draggable objects.

    <!doctype html>
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Draggable elements</title>
    <script type="text/javascript">
    (function () {
        var
            oActive, nMouseX, nMouseY, nStartX, nStartY,
            bMouseUp = true, nZFocus = /* the highest z-Index present in your page plus 1: */ 100;
    
        document.onmousedown = function (oPssEvt1) {
            var bExit = true, oMsEvent1 = oPssEvt1 || /* IE */ window.event;
            for (var iNode = oMsEvent1.target || /* IE */ oMsEvent1.srcElement; iNode; iNode = iNode.parentNode) {
                if (iNode.className === "draggable") { bExit = false; oActive = iNode; break; }
            }
            if (bExit) { return; }
            bMouseUp = false;
            nStartX = nStartY = 0;
            for (var iOffPar = oActive; iOffPar; iOffPar = iOffPar.offsetParent) {
                nStartX += iOffPar.offsetLeft;
                nStartY += iOffPar.offsetTop;
            }
            nMouseX = oMsEvent1.clientX;
            nMouseY = oMsEvent1.clientY;
            oActive.style.zIndex = nZFocus++;
            return false;
        };
    
        document.onmousemove = function (oPssEvt2) {
            if (bMouseUp) { return; }
            var oMsEvent2 = oPssEvt2 || /* IE */ window.event;
            oActive.style.left = String(nStartX + oMsEvent2.clientX - nMouseX) + "px";
            oActive.style.top = String(nStartY + oMsEvent2.clientY - nMouseY) + "px";
        };
    
        document.onmouseup = function () {
            bMouseUp = true;
        };
    })();
    
    </script>
    <style type="text/css">
    .draggable {
        position: fixed;
        left: 0;
        top: 0;
        width: auto;
        height: auto;
        cursor: move;
    }
     
    #myDiv {
        width: 300px;
        height: 200px;
        left: 200px;
        top: 200px;
        background-color: #00ff00;
    }
    </style>
    </head>
     
    <body>
     
    <div class="draggable" id="myDiv"><p>Hello world!</p></div>
    <div class="draggable" style="background-color:#aaaaaa;">Another hello world!</div>
     
    </body>
    </html>

    View this example in action.

    Specification

    DOM Level 0. Not part of specification.

    Document Tags and Contributors

    Contributors to this page: teoli
    Last updated by: teoli,