■ xeyes_o6.htm ■

戻る 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML LANG="ja">

<HEAD>
<META HTTP-EQUIV="Content-Type" CONTENT="text/html;charset=Shift_JIS">
<TITLE>xeyes もどき</TITLE>
</HEAD>

<BODY BGCOLOR="#CCFFFF">
<CENTER ID="base">
<BR><BR>
<B><FONT SIZE="+1" COLOR="#CC0000">xeyes もどき</FONT><BR><FONT COLOR="#CC0000">（Opera 6）</FONT></B>
<BR><BR><BR>

<DIV ID="eyes" STYLE="position:relative; width:240px; height:160px">
<IMG SRC="images/eyes.gif" WIDTH=240 HEIGHT=160>
<SPAN ID="eyeball0" STYLE="position:absolute; width:19px; height:25px; left:81px; top:68px">
<IMG SRC="images/eyeball.gif" WIDTH=19 HEIGHT=25>
</SPAN>
<SPAN ID="eyeball1" STYLE="position:absolute; width:19px; height:25px; left:141px; top:68px">
<IMG SRC="images/eyeball.gif" WIDTH=19 HEIGHT=25>
</SPAN>
</DIV>

</CENTER>

<!-- ページ下部のイベントを拾うためのダミー -->
<DIV ALIGN=RIGHT STYLE="position:absolute; right:0; bottom:0">
<SPAN STYLE="visibility:hidden">.</SPAN>
</DIV>

<SCRIPT LANGUAGE="JavaScript1.2" TYPE="text/javascript">
<!--

function move(e) {
  // 目玉の縦横比は 4:3
  var dx = (e.clientX - (document.getElementById("eyes").offsetLeft + 60) - document.getElementById("base").offsetLeft) * 4;
  var dy = (e.clientY - (document.getElementById("eyes").offsetTop  + 80) - document.getElementById("base").offsetTop)  * 3;
  var i;
  for(i = 0; i < 2; i++) {
    var d = dx * dx + dy * dy;
    var dx2, dy2;
    if(d > 14400) {  // マウスは目玉の外
      d = Math.sqrt(d);
      dx2 = dx * 120 / d;
      dy2 = dy * 120 / d;
    }
    else {
      dx2 = dx;
      dy2 = dy;
    }
    dx2 = Math.floor(Math.abs(dx2) / 4 + 0.5);
    if(dx < 0)
      dx2 = - dx2;
    dy2 = Math.floor(Math.abs(dy2) / 3 + 0.5);
    if(dy < 0)
      dy2 = - dy2;
    if(i)  // 左目
      dx2 += 120;
    with(document.getElementById("eyeball" + String(i)).style) {
      left = 51 + dx2;
      top  = 68 + dy2;
    }
    dx -= 480;
  }
}

  document.onmousemove = move;

//-->
</SCRIPT>

</BODY>

</HTML>