zoom_o6.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 ID="base">
<BR>
<B>拡 大 鏡<BR>(Opera 6)</B>
<BR><BR>

この画像の上にマウス ポインタを置いてください。<BR>
<IMG ID="prev" SRC="images/rengeji.jpg" WIDTH=256 HEIGHT=192>
<BR><BR>
<B>◆ 拡大 ◆</B><BR>
<DIV STYLE="position:relative; width:200px; height:200px; left:0; top:0; overflow:hidden; background-color:gray; border:maroon double">
<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>
<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.clientX - document.getElementById("prev").offsetLeft - document.getElementById("base").offsetLeft) * factor - 100;
  view.style.left = - off;
  off = (e.clientY - document.getElementById("prev").offsetTop - document.getElementById("base").offsetTop) * factor - 100;
  view.style.top = - off;
}

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

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

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 = - off;
  off = (- old_view.style.top + 100) / old_factor * factor - 100;
  view.style.top = - off;
  view.style.visibility = "visible";
  old_view.style.visibility = "hidden";
}

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

  factor = 2;
  view = document.getElementById("view2");

//-->
</SCRIPT>

</BODY>

</HTML>