<!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>
|
