| 解 説 |
背景画像の位置はスタイルシートのbackgroundPositionXとbackgroundPositionYにマウス座標を設定することで変更することができます。マウスが移動したかどうかをonmousemoveイベントで検知し、マウス座標をevent.x, event.yから読み出して設定します。
|
| コード |
<![CDATA[
<html>
<head>
<title>マウスに背景画像を追従させる</title>
<script language="JavaScript">
<!--
function setBGX()
{
document.body.style.backgroundPositionX = event.x;
document.body.style.backgroundPositionY = event.y;
}
// --></script>
</head>
<body onmousemove="setBGX()" background="bg.jpg">
マウスに背景画像が追従します。
</body>
</html>
]]>
|
|
■サンプルスクリプトを実行する >>実行
■各ブラウザでの動作結果を見る >>View! |
マウスに背景画像を追従させる