■ zoom_n4.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>拡大鏡</TITLE>
</HEAD>

<BODY BGCOLOR="#CCFFFF">
<CENTER>
<BR>
<B>拡 大 鏡<BR>（Netscape 4）</B>
<BR><BR>

この画像の上にマウス ポインタを置いてください。<BR>
<ILAYER NAME="prev">
<IMG NAME="img" SRC="images/rengeji.jpg" WIDTH=256 HEIGHT=192>
</ILAYER>
<BR><BR>
<B>◆ 拡大 ◆</B><BR>
<TABLE BORDER=1><TR><TD>
<ILAYER NAME="zoom" WIDTH=200 HEIGHT=200 BGCOLOR="gray">
<LAYER NAME="view2" LEFT=0 TOP=0 CLIP="0,0,200,200" VISIBILITY="hide">
<IMG SRC="images/rengeji.jpg" WIDTH=512 HEIGHT=384>
</LAYER>
<LAYER NAME="view4" LEFT=0 TOP=0 CLIP="0,0,200,200" VISIBILITY="hide">
<IMG SRC="images/rengeji.jpg" WIDTH=1024 HEIGHT=768>
</LAYER>
</ILAYER>
</TD></TR></TABLE>
<BR>
<FORM>
倍率　
<INPUT TYPE=RADIO NAME="factor" CHECKED onClick="set_factor(2)"> 2 倍
<INPUT TYPE=RADIO NAME="factor" onClick="set_factor(4)"> 4 倍<BR>
</FORM>
<BR>
</CENTER>

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

function move(e) {
  var off;
  off = (e.pageX - document.prev.document.img.x) * factor - 100;
  view.left = - off;
  view.clip.left = off;
  view.clip.right = off + 200;
  off = (e.pageY - document.prev.document.img.y) * factor - 100;
  view.top = - off;
  view.clip.top = off;
  view.clip.bottom = off + 200;
}

function over(e) {
  view.visibility = "show";
}

function out(e) {
  view.visibility = "hide";
}

function set_factor(new_factor) {
  if(new_factor == factor)
    return;
  var old_factor = factor;
  var old_view = view;
  factor = new_factor;
  view = (factor == 2) ? document.zoom.document.view2 : document.zoom.document.view4;
  if(old_view.visibility == "hide")
    return;
  var off;
  off = (old_view.clip.left + 100) / old_factor * factor - 100;
  view.left = - off;
  view.clip.left = off;
  view.clip.right = off + 200;
  off = (old_view.clip.top + 100) / old_factor * factor - 100;
  view.top = - off;
  view.clip.top = off;
  view.clip.bottom = off + 200;
  view.visibility = "show";
  old_view.visibility = "hide";
}

  document.prev.captureEvents(Event.MOUSEMOVE | Event.MOUSEOVER | Event.MOUSEOUT);
  document.prev.onmousemove = move;
  document.prev.onmouseover = over;
  document.prev.onmouseout = out;

  factor = 2;
  view = document.zoom.document.view2;
  document.forms[0].elements[0].checked = true;  // CHECKED アトリビュートが効かない場合がある

//-->
</SCRIPT>

</BODY>

</HTML>