![]() |
<!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> |