![]() |
<!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> |