TORQUES LABS

Check

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

使い方

cursorulerとは？

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

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

bookmarklet

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

更新情報

対応ブラウザ情報

LOG

• 2009-06-01 作成、公開

技術情報

参考情報

• Bookmarklet Crunchinator
  • JavaScriptをBookmarklet向けにコンバートしてくれるツール

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]