PHP & JavaScript Room :: 設置サンプル

<script type="text/javascript">
    /* マウスのXY座標を取得 */
    function getMouseXY_ie(){ /* IE */
        document.xy.screen_x.value=event.screenX;
        document.xy.screen_y.value=event.screenY;
        document.xy.page_x.value=event.pageX;
        document.xy.page_y.value=event.pageY;
        document.xy.client_x.value=event.clientX;
        document.xy.client_y.value=event.clientY;
        document.xy.offset_x.value=event.offsetX;
        document.xy.offset_y.value=event.offsetY;
    }
    function getMouseXY(event){ /* Firefox, Netscape */
        document.xy.screen_x.value=event.screenX;
        document.xy.screen_y.value=event.screenY;
        document.xy.page_x.value=event.pageX;
        document.xy.page_y.value=event.pageY;
        document.xy.client_x.value=event.clientX;
        document.xy.client_y.value=event.clientY;
        document.xy.offset_x.value=event.offsetX;
        document.xy.offset_y.value=event.offsetY;
    }
    /* onMouseMoveイベントが発生したら、マウスのXY座標を取得する処理を実行 */
    document.onmousemove=(document.all) ? getMouseXY_ie : getMouseXY;
</script>

<form action="#" name="xy">
    <table>
        <tr><td>screenX（モニタ画面上のX座標）</td><td>=</td><td><input type="text" name="screen_x" /></td></tr>
        <tr><td>screenY（モニタ画面上のY座標）</td><td>=</td><td><input type="text" name="screen_y" /></td></tr>
        <tr><td>pageX（ページ上のX座標）</td><td>=</td><td><input type="text" name="page_x" />　※Firefox、Netscapeのみ</td></tr>
        <tr><td>pageY（ページ上のY座標）</td><td>=</td><td><input type="text" name="page_y" />　※Firefox、Netscapeのみ</td></tr>
        <tr><td>clientX（ウィンドウ上のX座標）</td><td>=</td><td><input type="text" name="client_x" /> </td></tr>
        <tr><td>clientY（ウィンドウ上のY座標）</td><td>=</td><td><input type="text" name="client_y" /> </td></tr>
        <tr><td>offsetX（クリックした要素上のX座標）</td><td>=</td><td><input type="text" name="offset_x" />　※IEのみ</td></tr>
        <tr><td>offsetY（クリックした要素上のY座標）</td><td>=</td><td><input type="text" name="offset_y" />　※IEのみ</td></tr>
    </table>
</form>