フォーラム@nifty | フォーラム・サークル | サイトマップ | ヘルプ |
掲示板 コラム お役立ち イベント リンク   | FHPGサイトマップ | お問い合わせ |
TOP > お役立ち > JavaScriptのおもちゃ箱 > ページの一部分だけ見せる  

ページの一部分だけ見せる

原案:平井 公大 氏 (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>
個人情報保護ポリシー
Copyright© NIFTY 2006 All Rights Reserved.
Copyright© FHPG 2006 All Rights Reserved.