■ zoom.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>拡 大 鏡</B>
<BR><BR>

この画像の上にマウス ポインタを置いてください。<BR>
<IMG ID="prev" SRC="images/rengeji.jpg" WIDTH=256 HEIGHT=192>
<BR><BR>
<B>◆ 拡大 ◆</B><BR>
<DIV ID="zoom" STYLE="position:relative; width:200px; height:200px; left:0; top:0; overflow:hidden; background-color:gray; border:maroon double">
<DIV STYLE="position:relative; width:200px; height:200px; left:0; top:0; overflow:hidden"><!--もうひとつ要る-->
<DIV ID="view2" STYLE="position:absolute; left:0; top:0; visibility:hidden">
<IMG SRC="images/rengeji.jpg" WIDTH=512 HEIGHT=384>
</DIV>
<DIV ID="view4" STYLE="position:absolute; left:0; top:0; visibility:hidden">
<IMG SRC="images/rengeji.jpg" WIDTH=1024 HEIGHT=768>
</DIV>
</DIV>
</DIV>
<BR>
<FORM>
倍率　
<INPUT TYPE=RADIO NAME="factor" ID="fact2" 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.clientX + pageXOffset - document.getElementById("prev").offsetLeft) * factor - 100;
  view.style.left = String(- off) + "px";
  off = (e.clientY + pageYOffset - document.getElementById("prev").offsetTop) * factor - 100;
  view.style.top = String(- off) + "px";
}

function over(e) {
  move(e);
  view.style.visibility = "visible";
}

function out(e) {
  view.style.visibility = "hidden";
  // 消去
  with (document.getElementById("zoom").style) {
    backgroundColor = "#808080";
    backgroundColor = "gray";
  }
}

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.getElementById("view2") : document.getElementById("view4");
  if(old_view.style.visibility == "hidden")
    return;
  var off;
  off = (- old_view.style.left + 100) / old_factor * factor - 100;
  view.style.left = String(- off) + "px";
  off = (- old_view.style.top + 100) / old_factor * factor - 100;
  view.style.top = String(- off) + "px";
  old_view.style.visibility = "hidden";
  // 消去（おまじない）
  with (document.getElementById("zoom").style) {
    backgroundColor = "#808080";
    backgroundColor = "gray";
  }
  view.style.visibility = "visible";
}

  document.getElementById("prev").onmousemove = move;
  document.getElementById("prev").onmouseover = over;
  document.getElementById("prev").onmouseout = out;

  factor = 2;
  view = document.getElementById("view2");
  document.getElementById("fact2").checked = true;  // CHECKED アトリビュートが効かない場合がある

//-->
</SCRIPT>

</BODY>

</HTML>