| 解 説 |
マウスカーソルに合わせて縦横に線を引くにはあらかじめ表示する線の画像（1x1ピクセル）を用意し表示座標をマウスのXY座標 (event.x, event.y)、表示幅をウィンドウの縦横の幅 (document.body.clientWidth, document.body.clientHeight)に設定します。マウスが移動したかどうかはonmouseomoveイベントで検知することができます。
|
| コード |
<![CDATA[
<html>
<head>
<title>マウスカーソルに合わせて縦横に線を引く</title>
<script language="JavaScript"><!--
function setLine()
{
(objX = document.images["LineX"]).style.pixelTop = event.y;
(objY = document.images["LineY"]).style.pixelLeft = event.x;
objX.width = document.body.clientWidth;
objY.height = document.body.clientHeight;
}
// --></script>
</head>
<body onmousemove="setLine()">
<img src="dot.gif" name="LineX" width="1" height="1" style="position:absolute;left:0px;top:0px;z-index:1">
<img src="dot.gif" name="LineY" width="1" height="1" style="position:absolute;left:0px;top:0px;z-index:1">
画面上に線が表示されます。<br>
<img src="image.jpg">
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
マウスカーソルに合わせて縦横に線を引く（CADのような感じ）