フォーラム@nifty | フォーラム・サークル | サイトマップ | ヘルプ |
掲示板 コラム お役立ち イベント リンク   | FHPGサイトマップ | お問い合わせ |
TOP > お役立ち > JavaScriptのおもちゃ箱 > マウスが光源?  

マウスが光源?

原案:平井 公大 氏 (2001/01/06 登録)

 テキストの上でマウスが動かすと逆方向に影が表示されます(IE4.0以降のみ)。

表示サンプル

マウスが光源?

ソース記述内容

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html lang="ja">
<head>
<title>マウスが光源?</title>
<script type="text/javascript">
<!--
function lighting() {
  var x = window.event.clientX;
  var y = window.event.clientY;
  var l = drop_ID.style.pixelLeft + (drop_ID.style.pixelWidth/2);
  var t = drop_ID.style.pixelTop;
  document.all.drop_ID.filters['dropshadow'].offX = (l-x)/50;
  document.all.drop_ID.filters['dropshadow'].offy = (t-y)/50;;
}
// -->
</script>
</head>
<body>
<div style="text-align: center; height:60px"> 
  <div id="drop_ID" style="position:absolute; left:120px; top:360px; width:300px; height:300px; font-size:24pt; 
                           filter:dropshadow(color=#afafaf, offX=4, offY=4)"  onMouseMove="lighting()"> 
    マウスが光源?
  </div>
</div>
</body>
</html>
個人情報保護ポリシー
Copyright© NIFTY 2006 All Rights Reserved.
Copyright© FHPG 2006 All Rights Reserved.