xeyes2_n7.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">
<BR><BR>
<CENTER>
<B><FONT COLOR="#CC0000"><FONT SIZE="+1">xeyes もどき 其の二</FONT><BR>(Netscape 7)</FONT></B>
</CENTER>

<SPAN ID="base" STYLE="position:absolute; left:3px; top:3px">
<IMG ID="eye0" SRC="images/eye.gif" WIDTH=120 HEIGHT=160 STYLE="position:absolute; left:0; top:0">
<IMG ID="eye1" SRC="images/eye.gif" WIDTH=120 HEIGHT=160 STYLE="position:absolute; left:132px; top:0">
<IMG ID="iris0" SRC="images/iris.gif" WIDTH=20 HEIGHT=27 STYLE="position:absolute; left:50px; top:67px">
<IMG ID="iris1" SRC="images/iris.gif" WIDTH=20 HEIGHT=27 STYLE="position:absolute; left:182px; top:67px">
<SPAN ID="rect" STYLE="position:absolute; width:252px; height:160px; left:0; top:0; font-size:1px"><BR></SPAN>
<SPAN ID="h0" STYLE="position:absolute; width:6px; height:6px; left:-3px;  top:-3px;  background-color:#804040; visibility:hidden; font-size:1px; cursor:nw-resize"><BR></SPAN>
<SPAN ID="h1" STYLE="position:absolute; width:6px; height:6px; left:123px; top:-3px;  background-color:#804040; visibility:hidden; font-size:1px; cursor:n-resize" ><BR></SPAN>
<SPAN ID="h2" STYLE="position:absolute; width:6px; height:6px; left:249px; top:-3px;  background-color:#804040; visibility:hidden; font-size:1px; cursor:ne-resize"><BR></SPAN>
<SPAN ID="h3" STYLE="position:absolute; width:6px; height:6px; left:-3px;  top:77px;  background-color:#804040; visibility:hidden; font-size:1px; cursor:w-resize" ><BR></SPAN>
<SPAN ID="h4" STYLE="position:absolute; width:6px; height:6px; left:249px; top:77px;  background-color:#804040; visibility:hidden; font-size:1px; cursor:e-resize" ><BR></SPAN>
<SPAN ID="h5" STYLE="position:absolute; width:6px; height:6px; left:-3px;  top:157px; background-color:#804040; visibility:hidden; font-size:1px; cursor:sw-resize"><BR></SPAN>
<SPAN ID="h6" STYLE="position:absolute; width:6px; height:6px; left:123px; top:157px; background-color:#804040; visibility:hidden; font-size:1px; cursor:s-resize" ><BR></SPAN>
<SPAN ID="h7" STYLE="position:absolute; width:6px; height:6px; left:249px; top:157px; background-color:#804040; visibility:hidden; font-size:1px; cursor:se-resize"><BR></SPAN>
</SPAN>

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

function down(e) {
  if(e.button == 0) {  // 左ボタン
    // ハンドル上?
    for(i_h = 0; i_h < 8; i_h++) {
      if(e.target == elem_h[i_h]) {
        // サイズ変更開始
        st_x = e.pageX;
        st_y = e.pageY;
        old_x = rect_x;
        old_y = rect_y;
        old_w = rect_w;
        old_h = eye_h;

        document.documentElement.style.cursor = elem_h[i_h].style.cursor;  // カーソル イメージ固定

        tracking = 2;
        // Firefox や Safari で画面が選択状態になってしまうのを防ぐために,false を返す.
        return false;
      }
    }

    // ハンドル消去
    var i;
    for(i = 0; i < 8; i++)
      elem_h[i].style.visibility = "hidden";

    if(e.target == elem_rect) {  // 目の矩形領域内
      // 移動開始
      off_x = e.pageX - rect_x;
      off_y = e.pageY - rect_y;

      tracking = 1;
      return;
    }

    tracking = 0;
  }
}

function up(e) {
  if(e.button == 0) {  // 左ボタン
    switch(tracking) {
    case 1:  // 移動中
      // ハンドル表示
      var i;
      for(i = 0; i < 8; i++)
        elem_h[i].style.visibility = "visible";

      tracking = 0;
      break;

    case 2:  // サイズ変更中
      document.documentElement.style.cursor = "auto";  // カーソル イメージ復旧

      tracking = 0;
      break;
    }
  }
}

function move(e) {
  var max;

  switch(tracking) {
  case 1:  // 移動中
    rect_x = e.pageX - off_x;
    if(rect_x < 3) {
      rect_x = 3;
    }
    else {
      max = document.documentElement.scrollWidth - 3;
      if(rect_x + rect_w > max)
        rect_x = (max - rect_w > 3) ? max - rect_w : 3;
    }
    rect_y = e.pageY - off_y;
    if(rect_y < 3) {
      rect_y = 3;
    }
    else {
//    max = document.documentElement.scrollHeight - 3;
      max = document.body.scrollHeight - 3;
      if(rect_y + eye_h > max)
        rect_y = (max - eye_h > 3) ? max - eye_h : 3;
    }
    with(elem_base.style) {
      left = String(rect_x) + "px";
      top  = String(rect_y) + "px";
    }
    return;

  case 2:  // サイズ変更中
    var dx = e.pageX - st_x;
    var dy = e.pageY - st_y;

    switch(i_h) {
    case 0:  // 左上
    case 3:  // 左中
    case 5:  // 左下
      if((rect_w = old_w - dx) < 6) {
        rect_x = old_x + old_w - 6;
        rect_w = 6;
      }
      else {
        if((rect_x = old_x + dx) < 3) {
          rect_x = 3;
          rect_w = old_x + old_w - 3;
        }
      }
      break;
    case 2:  // 右上
    case 4:  // 右中
    case 7:  // 右下
      if((rect_w = old_w + dx) < 6) {
        rect_w = 6;
      }
      else {
        max = document.documentElement.scrollWidth - 3;
        if(rect_x + rect_w > max)
          rect_w = max - rect_x;
      }
      break;
    }

    switch(i_h) {
    case 0:  // 左上
    case 1:  // 中上
    case 2:  // 右上
      if((eye_h = old_h - dy) < 6) {
        rect_y = old_y + old_h - 6;
        eye_h = 6;
      }
      else {
        if((rect_y = old_y + dy) < 3) {
          rect_y = 3;
          eye_h = old_y + old_h - 3;
        }
      }
      break;
    case 5:  // 左下
    case 6:  // 中下
    case 7:  // 右下
      if((eye_h = old_h + dy) < 6) {
        eye_h = 6;
      }
      else {
//      max = document.documentElement.scrollHeight - 3;
        max = document.body.scrollHeight - 3;
        if(rect_y + eye_h > max)
          eye_h = max - rect_y;
      }
      break;
    }

    with(elem_base.style) {
      left = String(rect_x) + "px";
      top  = String(rect_y) + "px";
    }
    with(elem_rect.style) {
      width  = String(rect_w) + "px";
      height = String(eye_h)  + "px";
    }

    // 目玉
    eye_w = Math.floor(rect_w * 10 / 21 + 0.5);
    elem_eye0.style.width  = elem_eye1.style.width  = String(eye_w) + "px";
    elem_eye0.style.height = elem_eye1.style.height = String(eye_h) + "px";
    elem_eye1.style.left = String(rect_w - eye_w) + "px";

    // 黒目
    iris_w = Math.floor(eye_w / 6 + 0.5);
    iris_h = Math.floor(eye_h / 6 + 0.5);
    elem_iris0.style.width  = elem_iris1.style.width  = String(iris_w) + "px";
    elem_iris0.style.height = elem_iris1.style.height = String(iris_h) + "px";

    // ハンドル
    elem_h[1].style.left = elem_h[6].style.left = String((rect_w >> 1) - 3) + "px";
    elem_h[2].style.left = elem_h[4].style.left = elem_h[7].style.left = String(rect_w - 3) + "px";
    elem_h[3].style.top = elem_h[4].style.top = String((eye_h >> 1) - 3) + "px";
    elem_h[5].style.top = elem_h[6].style.top = elem_h[7].style.top = String(eye_h - 3) + "px";

    bounds = eye_w * eye_h * 5 / 18;

    // fall thru
  }

  var x = (e.pageX - (elem_base.offsetLeft + eye_w / 2)) * eye_h;
  var y = (e.pageY - (elem_base.offsetTop  + eye_h / 2)) * eye_w;
  var f;
  for(f = false; ; ) {
    var d = Math.sqrt(x * x + y * y);
    var x2, y2;
    if(d > bounds) {  // マウスは目玉の外
      x2 = x * bounds / d;
      y2 = y * bounds / d;
    }
    else {
      x2 = x;
      y2 = y;
    }
    x2 = Math.floor(Math.abs(x2) / eye_h + 0.5);
    if(x < 0)
      x2 = - x2;
    y2 = Math.floor(Math.abs(y2) / eye_w + 0.5);
    if(y < 0)
      y2 = - y2;

    if(f) {  // 左目
      with(elem_iris1.style) {
        left = String(rect_w - (eye_w >> 1) - (iris_w >> 1) + x2) + "px";
        top  = String((eye_h >> 1) - (iris_h >> 1) + y2) + "px";
      }

      break;
    }
    else {
      with(elem_iris0.style) {
        left = String((eye_w >> 1) - (iris_w >> 1) + x2) + "px";
        top  = String((eye_h >> 1) - (iris_h >> 1) + y2) + "px";
      }

      x = (e.pageX - (elem_base.offsetLeft + rect_w - eye_w / 2)) * eye_h;

      f = true;
    }
  }
}

  rect_w = 252;
  eye_w = 120;
  eye_h = 160;
  iris_w = 20;
  iris_h = 27;
  bounds = 120 * 160 * 5 / 18;

  elem_base = document.getElementById("base");
  elem_rect = document.getElementById("rect");
  elem_eye0 = document.getElementById("eye0");
  elem_eye1 = document.getElementById("eye1");
  elem_iris0 = document.getElementById("iris0");
  elem_iris1 = document.getElementById("iris1");
  elem_h = new Array();
  elem_h.length = 8;
  for(i = 0; i < 8; i++)
    elem_h[i] = document.getElementById("h" + String(i));

  with(elem_base.style) {
    left = String(rect_x = (document.documentElement.scrollWidth  > 258)
                             ? 3 + ((document.documentElement.scrollWidth  - 258) >> 1) : 3) + "px";
    // Netscape 7 では document.documentElement.scrollHeight でよいが,Firefox で試してみたら
    // うまく動かなかったので,document.body.scrollHeight に変更
//  top  = String(rect_y = (document.documentElement.scrollHeight > 166)
    top  = String(rect_y = (document.body.scrollHeight > 166)
//                           ? 3 + ((document.documentElement.scrollHeight - 166) >> 1) : 3) + "px";
                             ? 3 + ((document.body.scrollHeight - 166) >> 1) : 3) + "px";
  }

  tracking = 0;

  document.onmousedown = down;
  document.onmouseup = up;
  document.onmousemove = move;

//-->
</SCRIPT>

</BODY>

</HTML>