cursoruler


※不具合があるようです。

使い方

cursorulerとは?

これはウェブページ上にピクセル単位の定規を表示するツールです。

cursoruler1

Bookmarkletとして提供しているので、以下のリンク [start cursoruler] をブックマークフォルダにドラッグ&ドロップして、それをクリックするだけで、定規が表示されます。
定規が表示された状態でマウスクリックすると、定規は消えます。

bookmarklet

このリンクボタンをブックマークフォルダにドロップ ↓(WPのプラグインの影響かうまくいかなくなっているので、後述するコードをブックマークに入れてくださいm(__)m)
cursoruler

更新情報

対応ブラウザ情報

ブラウザ名 バージョン 動作確認状況
Firefox 3.0.10 OK
InternetExplorer 7 OK
8 NG

LOG

  • 2009-06-01 作成、公開

技術情報

参考情報

JavaScriptコード

  • コードの最初の方にある “a” が定規のアルファ値で0.0~1.0に設定できます。
  • コードの最初の方にある “offset” が定規のカーソルからのオフセット位置となります。X,Y座標、両方とも同じオフセット位置になります。

[javascript]var a = 0.8;
var offset = -20;
var old_onmm = null;
function start_cruler(){
old_onmm = window.document.onmousemove;
window.document.onmousemove = process;
createLayer();
}
function process(e){
var mp=getMousePos(e);
var cr=document.getElementById(‘cruler’);
var crx=(mp.x+offset)+”px”;
var cry=(mp.y+offset)+”px”;
cr.style.top=cry;
cr.style.left=crx;
var crt=document.getElementById(‘cruler_text’);
crt.innerHTML=”[“+crx+”,”+cry+”]”;
}
function getMousePos(e) {
var obj = new Object();
if(e){
obj.x=e.pageX;
obj.y=e.pageY;
}
else {
obj.x=event.x+document.body.scrollLeft;
obj.y=event.y+document.body.scrollTop;
}
return obj;
}
function createLayer(){
var oDiv=document.getElementById(‘cruler’);
if(oDiv==null){
oDiv=document.createElement(“div”);
oDiv.setAttribute(‘id’,’cruler’);
oDiv.style.position=’absolute’;
oDiv.style.zindex=’90’;
oDiv.style.width=’502px’;
oDiv.style.height=’502px’;
oDiv.style.backgroundColor=”#ccccdd”;
oDiv.style.filter=’alpha(opacity=’+(100*a)+’)’;
oDiv.style[“-moz-opacity”]=a;
oDiv.style[“-khtml-opacity”]=a;
oDiv.style.opacity=a;
var dImg=document.createElement(“img”);
dImg.src=’http://labs.torques.jp/cursoruler/cursor500.gif’;
oDiv.appendChild(dImg);
oDiv.onclick=stop_cruler;
}
document.body.appendChild( oDiv );
var oTxt=document.getElementById(‘cruler_text’);
if(oTxt==null){
oTxt=document.createElement(“div”);
oTxt.setAttribute(‘id’,’cruler_text’);
oTxt.style.position=’absolute’;
oTxt.style.zindex=’91’;
oTxt.style.left=oTxt.style.top=(-offset+30)+’px’;
oDiv.appendChild(oTxt);
}
}
function stop_cruler(e){
var oDiv=document.getElementById(‘cruler’);
if(oDiv!=null){document.body.removeChild( oDiv );}
window.document.onmousemove=old_onmm;
old_onmm=null;
}

start_cruler();
[/javascript]


One Comment

  1. […] それが、ブラウザ上にピクセル定規を表示するツール「cursoruler」です。 […]

Post a Comment

Your email is never published nor shared. Required fields are marked *

*
*

日本語が含まれない投稿は無視されますのでご注意ください。(スパム対策)