トップ > Javascriptサンプル

Javascriptは、ブラウザの種類やバージョン、環境により機能するものとしないものがあります。
また、DHTMLを使用している場合もあります。
DHTMLについては「DHTMLサンプル」もご参照下さい。

■ マウスに追随する画像(マウスストーカー)

◆ 実行サンプル

このサンプルではここに記述するものはありません。
略号の説明 動作が確認できたブラウザ
IE6.0 NS7.0 MZ1.7.7 FF1.5 OP7.53

【記述サンプル】

まず、テキストエディタなどを使用し、次の記述を「mpgrph1.js」というファイル名で保存します。
maximg = 5; //追随に使用する画像の数 Wx = -1; Wy = -1; timerID = 0; if (document.layers) document.captureEvents(Event.MOUSEMOVE); document.onmousemove = m_pos; slide_img(); function m_pos(event0) { if (navigator.appName.charAt(0)=="M") { /* Wx = window.event.offsetX; Wy = window.event.offsetY; Wx = event.clientX; Wy = event.clientY; */ Et =event.type; Sx =event.screenX; Sy =event.screenY; Wx = document.body.scrollLeft+event.clientX; Wy = document.body.scrollTop+event.clientY; } if (navigator.appName.charAt(0)=="N") { Et =event0.type; Sx =event0.screenX; Sy =event0.screenY; Wx =event0.pageX; Wy =event0.pageY; } imgnam0="img"+maximg; if (navigator.appName.charAt(0)=="M") { document.all[imgnam0].style.pixelLeft = Wx; document.all[imgnam0].style.pixelTop = Wy+15; } if (navigator.appName.charAt(0)=="N") { document.layers[imgnam0].x = Wx; document.layers[imgnam0].y = Wy+15; } } function slide_img() { imgnam0="img1"; chkflg = 0; for (i=2;i<=maximg;i++){ imgnam1 = "img"+i; if (navigator.appName.charAt(0)=="M") { with(window[imgnam0].style){ if (window[imgnam1].style.pixelLeft != pixelLeft) chkflg = 1; if (window[imgnam1].style.pixelTop != pixelTop) chkflg = 1; pixelLeft = window[imgnam1].style.pixelLeft; pixelTop = window[imgnam1].style.pixelTop; } } if (navigator.appName.charAt(0)=="N") { if (document[imgnam1].left != document[imgnam0].left) chkflg = 1; if (document[imgnam1].top != document[imgnam0].top) chkflg = 1; document[imgnam0].left = document[imgnam1].left; document[imgnam0].top = document[imgnam1].top; } imgnam0 = imgnam1; } //次の行の「-1」を削除するとカーソル停止中に画像を消すことが可能 for (i=1;i<=maximg-1;i++){ imgnam1 = "img"+i; if (navigator.appName.charAt(0)=="M") { if (chkflg == 0){ window[imgnam1].style.visibility = "hidden"; } else { window[imgnam1].style.visibility = "visible"; } } if (navigator.appName.charAt(0)=="N") { if (chkflg == 0){ document[imgnam1].visibility = "hide"; } else { document[imgnam1].visibility = "show"; } } } imgnam0="img"+maximg; clearTimeout(timerID); timerID = setTimeout("slide_img()",50); }


画像表示を記述した次のようなレイアウト枠(レイヤー)とJavascriptの呼び出しを「body」タグの直後ぐらいに記述します。
<span id="img1" style="position:absolute;left:0;top:0; visibility: hidden;"><img src="../../images/sample/star5.gif"></span>
<span id="img2" style="position:absolute;left:0;top:0; visibility: hidden;"><img src="../../images/sample/star4.gif"></span>
<span id="img3" style="position:absolute;left:0;top:0; visibility: hidden;"><img src="../../images/sample/star3.gif"></span>
<span id="img4" style="position:absolute;left:0;top:0; visibility: hidden;"><img src="../../images/sample/star2.gif"></span>
<span id="img5" style="position:absolute;left:0;top:0; visibility: hidden;"><img src="../../images/sample/star1.gif"></span>
<script type="text/javascript" src="./js/mpgrph2.js"></script>



page update:2010/01/23 20:32

Copyright (c) 2000-2009, all Rights Reserved & Produced by atom