[Let] マウス座標を取得していちいち表示し続ける

sandai — 2010-05-17T16:20:50Z
/*
 * @title マウス座標を取得していちいち表示し続ける
 * @description 透けてます。ctrlキーで透けません。http://d.hatena.ne.jp/sandai/20100518/p1
 * @include http://*
 * @license MIT License
 * @require 
 */

(function() {
  var target = relatedTarget = null;
  var change = 1;
  var coordinate = Array(4), div = Array(4);
  var cwidth = window.innerWidth || document.documentElement.offsetWidth, 
      cheight = window.innerHeight || document.documentElement.offsetHeight;
  var box = document.createElement('div');
  box.id = 'broCoordinate';
  box.style.backgroundColor = '#ff4500';
  box.style.color = 'white';
  box.style.position = 'absolute';
  box.style.filter = 'alpha(opacity=70)';
  box.style.opacity = '0.7';
  box.style.whiteSpace = 'nowrap';
  box.style.zIndex = '10000';
  for(var i = 0; i < div.length; i++) {
    div[i] = document.createElement('div');
    div[i].style.margin = '0 3px';
    div[i].style.textAlign = 'left';
    box.appendChild(div[i]);
  }
  
  document.body.appendChild(box);
  
  document.onmousemove = function(e) {
    coordinate[0] = [((e)?e.clientX:window.event.clientX),((e)?e.clientY:window.event.clientY)];
    coordinate[1] = [((e)?e.pageX:window.event.clientX+document.documentElement.scrollLeft),((e)?e.pageY:window.event.clientY+document.documentElement.scrollTop)];
    coordinate[2] = [((window.event)?window.event.offsetX:e.layerX),((window.event)?window.event.offsetY:e.layerY)];
    coordinate[3] = [((e)?e.screenX:window.event.screenX),((e)?e.screenY:window.event.screenY)]
    div[0].innerHTML = 'clientX: ' + coordinate[0][0] + ', ' + 'clientY: ' + coordinate[0][1];
    div[1].innerHTML = 'pageX: ' + coordinate[1][0] + ', ' + 'pageY: ' + coordinate[1][1];
    div[2].innerHTML = 'offsetX: ' + coordinate[2][0] + ', ' + 'offsetY: ' + coordinate[2][1];
    div[3].innerHTML = 'screenX: ' + coordinate[3][0] + ', ' + 'screenY: ' + coordinate[3][1];
    
    box.style.left = coordinate[1][0] + 10 + 'px';
    box.style.top = coordinate[1][1] + 10 + 'px';
    
    var boxWidth = box.scrollWidth, boxHeight = box.scrollHeight;
    if((cwidth - boxWidth) < (coordinate[0][0] + 40)) {
      box.style.left = coordinate[1][0] - boxWidth - 5 + 'px';
    }
    if((cheight - boxHeight) < (coordinate[0][1] + 40)) {
      box.style.top = coordinate[1][1] - boxHeight - 5 + 'px';
    }
    
    target = ((e)? e.target : window.event.srcElement);

    if(target){
      if(!relatedTarget) {
        target.style.outline = 'blue 2px solid';
        relatedTarget = target;
      }
      if(target != relatedTarget) {
        relatedTarget.style.outline = '';
        relatedTarget = null;
      }
    }
  };
  
  document.onkeydown = function(e) {
    var ctrlKey =  (e)? e.ctrlKey : window.event.ctrlKey;
    if(ctrlKey && change == 1) {
      box.style.filter = 'alpha(opacity=100)';
      box.style.opacity = '1';
      cancel(e);
    } else if(ctrlKey && change == 2) {
      box.style.filter = 'alpha(opacity=70)';
      box.style.opacity = '0.7';
      cancel(e);
    }
    
    function cancel(evt) {
      change = 3 - change;
      if(evt != undefined) {
        e.preventDefault(); 
        e.stopPropagation();
      } else {
        window.event.returnValue = false;
        window.event.cancelBubble = true;
      }
    }
  };
})();
Bookmarklets from sandai

[Let] マウス座標を取得していちいち表示し続ける
