フォーラム@nifty | フォーラム・サークル | サイトマップ | ヘルプ |
掲示板 コラム お役立ち イベント リンク   | FHPGサイトマップ | お問い合わせ |
TOP > お役立ち > JavaScriptのおもちゃ箱 > 画像はいつも同じ位置  

画像はいつも同じ位置

原案:平井 公大 氏 (2001/04/23 登録)

 ページがスクロールした場合でも、いつも同じ位置に画像を表示しておくスクリプトです。

表示サンプル

【別窓で表示します】

ソース記述内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>画像はいつも同じ位置</title>
<script type="text/javascript">
<!--
var nv, yoko, tate, st, sl;

function init() {
  nv = "x";
  if ( document.layers ) nv = "n4";
  if ( document.all    ) nv = "e4";
  if ( navigator.appName=="Netscape" &&
       parseInt(navigator.appVersion) >= 5 ) nv = "n5";
  if ( nv == "n4" ) {
    yoko = parseInt( document.layers["L1"].left );
    tate = parseInt( document.layers["L1"].top  );
  } else if( nv=="n5" || nv=="e4" ) {
    yoko = parseInt( document.getElementById('L1').style.left );
    tate = parseInt( document.getElementById('L1').style.top  );
  }
  if( nv=="n4" || nv=="n5" ) setInterval( "kotei()",10 );
}

function kotei() {
  if( nv=="n4" || nv=="n5" ) {
    st = parseInt(window.pageYOffset) + tate;
    sl = parseInt(window.pageXOffset) + yoko;
  } else if ( nv=="e4") {
    st = document.body.scrollTop  + tate;
    sl = document.body.scrollLeft + yoko;
  }
  if( nv=="n4" ) {
    document.layers["L1"].top  = st;
    document.layers["L1"].left = sl;
  } else if ( nv=="e4" || nv=="n5" ) {
    document.getElementById('L1').style.top  = st;
    document.getElementById('L1').style.left = sl;
  }
}
// -->
</script>
</head>
<body onscroll="kotei()" onLoad="init()">
<div style="text-align:center; height:1000px">
  <div id="L1" style="position:absolute; top:100px; left:200px;">
    <img src="0.jpg" name="chgimg" width="100" height="50" alt="">
  </div>
</div>
</body>
</html>
個人情報保護ポリシー
Copyright© NIFTY 2006 All Rights Reserved.
Copyright© FHPG 2006 All Rights Reserved.