デスクトップにスクロールバー


今回は、ホームページの作成という方向性からは思いっ切り外れますが、デスクトップにスクロールバー（縦スクロールバー） を表示する方法を説明します。アクティブ・デスクトップを応用した方法なので、アクティブ・デスクトップを利用できる環境の方のみ、お読み下さい。

アクティブ・デスクトップを利用すると、デスクトップの壁紙に Web ページ（HTML で作成したファイル）を表示できますね。 Web ページを表示できるということは、JPEG 画像やアニメーション、MIDI や WAVE, MP3 等のサウンドファイル、各種のスクリプトをデスクトップ上で実行できることでもあります。

ところが、表示した WEB ページが画面をはみ出すようなサイズの場合、スクロールバーが表示されないため全部を見ることが出来ないようです。 （何か方法があるかも知れませんが、私は知りません。）そこで、インライン・フローティング・フレームの方法を応用して縦スクロールバーを表示する方法を考えてみました。

しかし、ただ表示するだけではつまらないので、ドロップダウンリストで設定ファイルの切り替え、フルパス指定＋ボタンクリックでファイルの読込が出来るようになっています。

まず、Sample.html というファイルを作成し、ソースを次のようにします。

<HTML>
<HEAD>
<TITLE></TITLE>
<SCRIPT Language="JavaScript">
<!--

function GO(){
with(document)
{
CSL= '<IFRAME src="'+test.tar.value+'" width="100%" height="100%" frameborder=0></IFRAME>';
all.UR.innerHTML= CSL;
}
}

function SelMenu(){
Menus=new Array();
//以下に設定ファイルのパスを x 個指定する．．．(注意1)
Menus[0]="（ファイルのパス 1）";
Menus[1]="（ファイルのパス 2）";
Menus[2]="（ファイルのパス 3）";
・
・
・
Menus[x]="（ファイルのパス x）";
CSL= '<IFRAME src="'+Menus[document.test.sele.selectedIndex]+'" width="100%" height="100%" frameborder=0></IFRAME>';
document.all.UR.innerHTML= CSL;
document.test.tar.value=Menus[document.test.sele.selectedIndex];
}

//-->
</SCRIPT>
</HEAD>
<BODY leftmargin=0 topmargin=0 bgcolor="pink">
<DIV align=right>
<FORM name="test">
<SELECT name="sele" onChange="SelMenu()">
<!-- 以下にドロップダウンリストを x 個指定する．．．(注意2) >
<OPTION selected>適当な名前 1
<OPTION>適当な名前 2
<OPTION>適当な名前 3
・
・
・
<OPTION>適当な名前 x
</SELECT>
<INPUT name="tar" type="text" value="C:/Files/GAL.html" size=80>
<INPUT type="button" value="GO!" onClick="GO()">
<DIV id="UR">
<IFRAME src="（ここにデフォルトのファイルを指定．．．注意3）" width="100%" height="100%" frameborder=0></IFRAME>
</DIV></FORM></DIV>
</BODY>
</HTML>

太字で書かれている部分はご自分で正確に設定して下さい。そうしないとエラーになります。 注意1 では設定したいファイルのパスを絶対パス（例：C:/Files/document.htm）または Sample.html からの相対パスで x 個指定します。 （パスの区切りは / でも \ でも可。）例えば10個設定するなら Menus[9] までとなります。

注意2 の「適当な名前」には好きな名前を付けて結構です。必ず設定ファイルと同じ数にして下さい。 注意3 のデフォルトのファイルもフルパスまたは Sample.html からの相対パスで指定します。

Sample.html の設定が終わったら、エラーが生じないかどうかブラウザ（Internet Explorer のみ）でテストしてみて下さい。 うまく行くようでしたら、デスクトップの「背景」をこの Sample.html に設定します。

設定するファイルは HTML ファイルだけでなく、JPEG 等の画像でもＯＫです。 縦長の大きな画像でもスクロールして見ることが出来ます。（横スクロールは出来ません。）但しインライン・フローティング・フレームを使用しているため、 直接画像ファイルを指定した場合、周囲にマージンが出来てあまりかっこうよくありません。それを回避するためには、面倒でも各画像ごとに HTML ファイルを作成し、 ソースを次のように設定して、この HTML ファイルを指定するようにします。

<HTML>
<HEAD></TITLE>（省略可）</TITLE></HEAD>
<BODY leftmargin=0 topmargin=0>
<IMG src="（ここに画像ファイルのパスを指定）" border=0><BR><BR>
</BODY>
</HTML>

壁紙チェンジャーの出来上がりです。



次のトピックは「スタイルシート非表示ユーザに対応するには」です。

目次 | ← 前のトピック | ↑ページのトップ | 次のトピック →

ご意見・ご質問がありましたら「ザ・掲示板」またはメールにて梅ちゃん堂まで