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