NO.125 ウィンドウ応用⑤

インラインフレームでユーザー補助機能

相変わらずどこにも載ってないような独自路線の実例ですｗ
インラインフレームの制御とマウスについてくるウィンドウを組み合わせてユーザー補助機能を作ろうという試みです。
マウスをクリックした時にマウスの側でヘルプを表示するScriptですが、インラインフレームを用いて行うのはなかなか無いと思います。
また、この実例では常にカーソルの横に｢ヘルプ｣が付きまといますが、インラインフレームのサイズをゼロにすれば非表示にする事も可能です。

実行例

ソース

<iframe src=about:blank width=41 height=17 name=f1 style="border:solid silver 1px;"></iframe>
<script type=text/javascript>
<!--
G=0;
AS="<html><head><style type=text/css>"+
"body{margin:0px;padding:0px;font-size:11px;}b{background-color:blue;color:white;}"+
"input{font-size:9px;width:14px;height:14px;border:solid silver 1px;background-color:black;color:white;}"+
"</style></head><bo"+"dy scroll=no>"+
"<b style='width:181px;'>ヘルプ</b><input type=button value='×'onClick='parent.js3();'>"+
"<br><div style='margin:2px'>このページではJavaScriptを用いた実例を取り扱っています。<br>"+
"インラインフレームを用いてヘルプ機能を作るとこのように表示されます。<br><a href=index.html target=_top>トップページ</a></div>"+
"</bo"+"dy></html>";

f1.document.open();
f1.document.write(AS);
f1.document.close();
function js1(){if(G==0)f1.moveTo(event.x+10,document.body.scrollTop+event.y);}
function js2(){G=1;f1.resizeTo(200,100);}
function js3(){G=0;f1.resizeTo(41,17);}
document.body.onmousemove=js1;
document.body.onclick=js2;
-->
</script>

※event.x⇒マウスのX座標を参照、event.y⇒マウスのY座標を参照、document.body.scrollTop⇒スクロール位置を参照

実行 ※ページ全体を参照

トップに戻る前に戻る　次に進む

SEO		[PR] 爆速!無料ブログ無料ホームページ開設無料ライブ放送