ページの一部分だけ見せる
原案:平井 公大 氏 (2001/02/04 登録)
マウスポインタがあるあたりの一部分だけを表示します(IE4.0以降)。
表示サンプル
ソース記述内容
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>ページの一部分だけ見せる</title>
<script type="text/JavaScript">
<!--
function disp() {
var w = 200 //表示する横幅
var h = 100 //表示する高さ
var l = document.getElementById('clip1').style.pixelLeft;
var t = document.getElementById('clip1').style.pixelTop;
var x1 = event.clientX - ( l + w / 2);
var y1 = event.clientY - ( t + h / 2);
var x2 = x1 + w;
var y2 = y1 + h;
document.getElementById('clip1').style.clip.Top = x1;
document.getElementById('clip1').style.clip.Left = y1;
document.getElementById('clip1').style.clip="rect("+ y1 +","+ x2 +","+ y2 +","+ x1 +")";
document.getElementById('clip1').style.visibility="visible";
}
// -->
</script>
</head>
<body onMouseMove="disp()">
<div style="height:100px">
<div class="sample" id="clip1"
style="position:absolute; top:360px; left:140px;
width:234px; height:60px; visibility:hidden">
<img src="../../common/images/fhpg.gif" name="logo" width="234" height="60">
</div>
</div>
</body>
</html>