レイヤ制御
この例は、簡単なレイヤ構造を持つ画面の制御を行うものです
ソースとしては、以下の通りです
<![CDATA[
<!DOCTYPE html public "-//W3C//DTD HTML 3.2 Final//EN">
<HTML>
<HEAD>
<META http-equiv="content-type" content="text/html; charset=Shift_JIS">
<TITLE>HTML勉強会テキスト</TITLE>
<SCRIPT language="javascript">
<!--
var xpos = 0;
var ypos = 50;
function mouseoveraction(rdm) {
xpos += ( rdm < 0.5 ) ? 50 : ( -50 );
ypos += ( rdm < 0.25 || ( rdm > 0.5 && rdm < 0.75 ) ) ? 50 : ( -50 );
if ( xpos > 400 ) xpos -= 100;
if ( xpos < 0 ) xpos += 100;
if ( ypos > 450 ) ypos -= 100;
if ( ypos < 50 ) ypos += 100;
document.layers["lay2"].moveTo(xpos,ypos);
}
// -->
</SCRIPT>
</HEAD>
<BODY bgcolor="#c0c0c0" text="#000000" link="#0000ff" vlink="#800080">
<LAYER z-index="2" name="lay1" left="0" top="0"></LAYER>
<LAYER z-index="1" name="lay2" left="0" top="50">
<A href="javascript:void(0)" onMouseover="mouseoveraction(Math.random())">
<IMG border="0" src="pac.gif" width="50" height="50">
</A></LAYER>
画像の上にマウスポインタを移動してみて下さい<BR>
</BODY>
</HTML>]]>
function mouseoveraction()は、マウスポインタが画像の上に来た場合、そのレイヤの位置を変更します
Math.random()で発生させた乱数を基に、レイヤを別の位置へ移動させ、画像がマウスポインタから逃げる様な演出をしてみました
moveToは、レイヤの表示位置を移動させる事が出来ます
ここをクリックすると、この画面の実行結果が見れます