髭仙人の漫ろ歩き
JavaScript
............................ unworldly man go for a ramble in the internet world ...
「JavaScript」テクニックの紹介
 「とほほのJavaScript」や「とむやん君のJavaScript講座」などを参考に


 ここで使用した「HTML」は、右図のように「表示」の「ソース」で見ることが出来ます。「印刷」や「名前を付けて保存」で参照して下さい。

・「表示」の「ソース」で表示されるHTMLの記載(抜粋)
<HTML>
<HEAD>
<TITLE>アクセス</TITLE>
<Script Language="JavaScript">
<!--
var kazudata=5;
var htmldata=new Array();
htmldata[0]='<IMG SRC="Data/yogo1.jpg" WIDTH="300" HEIGHT="200"><BR><FONT SIZE="2" COLOR="#336699">余呉湖(1)</FONT>';
htmldata[1]='<IMG SRC="Data/yogo2.jpg" WIDTH="300" HEIGHT="200"><BR><FONT SIZE="2" COLOR="#336699">余呉湖(2)</FONT>';
htmldata[2]='<IMG SRC="Data/yogo3.jpg" WIDTH="300" HEIGHT="200"><BR><FONT SIZE="2" COLOR="#336699">余呉湖(3)</FONT>';
htmldata[3]='<IMG SRC="Data/yogo4.jpg" WIDTH="300" HEIGHT="200"><BR><FONT SIZE="2" COLOR="#336699">余呉湖(4)</FONT>';
htmldata[4]='<IMG SRC="Data/yogo5.jpg" WIDTH="300" HEIGHT="200"><BR><FONT SIZE="2" COLOR="#336699">余呉湖(5)</FONT>';
htmldata[5]='<IMG SRC="Data/yogo6.jpg" WIDTH="300" HEIGHT="200"><BR><FONT SIZE="2" COLOR="#336699">余呉湖(6)</FONT>';

function writeHTMLdata() {
var num=Math.floor(Math.random()*(kazudata+1));
document.write(htmldata[num]);
}
// End -->
</Script>

 尚、使用した「JavaScrpt」は、「とほほのWWW入門」の「とほほのJavaScript」や「とむやん君のJavaScript講座」などを参考にさせて頂きました。

 参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 下記は、画像ファイルの拡張子が大文字と小文字との違いですが、パソコン内ではどちらも表示され、不都合はないのですが、現実には一方は表示され、片方は画像が表示されません。このように自分のパソコン内の環境を過信することは要注意です。

 これは一例で、同様のことは結構多発します。今回は同一のパソコンで結果が判明できますが、別のパソコンでないと判明しない場合もありますので、念入りなチェックをしてください。

  ・File:yogo1.jpg   ・File:yogo1.JPG 

 

 
「メッセージ」表示のテクニック  
 メッセージを1文字づつ表示する


 メッセージを強調する手法の一つとして、1文字づつ表示することによりインパクトを与えるテクニックを紹介します。

 このテクニックは「JavaScript」でもレベルの高い技法で、詳細の説明は省略します。参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

 文字の色やサイズを変更したり、表示するスピードなども自由に設定することがかのうです。但しある程度の基本知識が必要です。

……………………………………………………………………………………………………………………

 メッセージを下から上へスクロールする


 メッセージを強調する手法の一つとして、文字列を下から上へ一行ずつ表示し、インパクトを与えるテクニックを紹介します。

 複数列の文字列を複数ページ表示できますし、文字の色やサイズを変更したり、スクロールスピードを変更することも可能です。

 このテクニックは「JavaScript」でもレベルの高い技法で、詳細の説明は省略します。参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 マウスでリンクに対応したメッセージを表示する


 複数のリンク部分にマウスを重ねると、メッセージが表示され、クリックするとリンクしたページに移動します。ここでは画像の上にメッセージを表示するなどと趣向を凝らした画面作りをしています。

 このテクニックは「JavaScript」でもレベルの高い技法で、詳細の説明は省略します。参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

 当然、画像にGIFアニメなどを利用すれば、一層の楽しみがある画面作りができます。

……………………………………………………………………………………………………………………

 メッセージの文字を少しずつ大きさをかえる


 メッセージを強調する手法の一つとして、メッセージの文字を少しづつ大きくすることによりインパクトを与えるテクニックを紹介します。

 文字メッセージが徐々に大きく表示されます。次に、指定した文字サイズになったら、今度は徐々に消えて行きます。
文字色&文字サイズ&消え方を簡単に変更出来ます。

 このテクニックは「JavaScript」でもレベルの高い技法で、詳細の説明は省略します。参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

 

 
「アクセス」のテクニック  
 プルダウンメニューからBGM選択


 Webサイトを訪れてくれた方に、少しでもくつろいで楽しんでいただくための手法の一つとして、バックグランドミュージックを鳴らすことがあります。その場合コンテンツにあった曲を複数用意しておいて、その中から選曲してもらうテクニックを紹介します。

 ここでは、プルダウンメニューを表示し、その中から選択した曲をBGMに変えることが出来ます。

 問題rとして、このフリースペースの「FC2Web」が、Soundファイルが対応していないので、「hoops」にリンクしています。

 このテクニックは「JavaScript」でもレベルの高い技法で、詳細の説明は省略します。参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 本来の画像が表示されるまで、仮の画像を表示


 重い画像が表示されるまで接続環境にもよりますが相当時間を要する場合があります。その間仮のメッセージを表示して安心して待って頂くテクニックを紹介します。

 ここでは444KBとかなり重い画像を用意しました。その画像が表示されるまで、「現在読み取り中」と36KBと比較的軽い画像を仮に表示させるようにしました。

 単純ないたって軽い文章を表示してもいいでしょうが、見ている方に関心を持たせ引き止めておく配慮も必要でしょう。

 このテクニックは「JavaScript」でもレベルの高い技法で、詳細の説明は省略します。参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 ランダムに画像を変える


 Webサイト楽しんで頂く手法の一つとして、クリックする度に画像や文字などのHTMLをランダムで表示するテクニックを紹介します。

・Math.random()関数を利用した比較的簡単なテクニックです。

   xx = Math.floor(Math.random() * 10);

 参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 画像を指定した秒数で繰り返し変更する


 Webサイト楽しんで頂く手法の一つとして、画像が一定時間毎に表示を変更するするテクニックを紹介します。

 Gifアニメを使用する方法もありますが、ここではJavaScriptを使用した場合を紹介しています。この手法を応用すれば、結構楽しい画面作りに挑戦できると思います。

 このテクニックは「JavaScript」でもレベルの高い技法で、詳細の説明は省略します。参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

 

 
「サブウインドウ」のテクニック  
 「サブウインドウ」を表示する


 文章の詳細を別のウインドウで表示するとか、メニューの写真から拡大写真を別のウインドウで表示するなどの場合、通常のハイパーリンクで画面表示するよりも、そのサブウインドウの表示位置や大きさを指定することにより、より一層明快で快適な画面作りができます。

  ・通常のハイパーリンクでサブウインドウを表示する場合。クリックしてください
  ・サブウインドウの表示位置や大きさなどを指定した場合。

◇サブウインドウの表示位置や大きさなどを指定する「JavaScript」の記述。

・<HEAD>部の記載内容
<Script Language="JavaScript">
<!--
function openSubWin(url,name,wid,hei) {
window.open(url,name,"width="+wid+",height="+hei+",left=120,top=320,resizable=yes");
}
//-->
</Script>

・<BODY>部の記載内容
<a href="#" onClick='openSubWin("TestData/yogo1L.JPG","Subwin",500,380);return false'>
<img src="TestData/yogo1s.JPG" width="120" height="90" border="0"></a>

 上記の「JavaScript」の記載で、サブウインドウの表示位置や大きさなどを指定することができます。写真を複数掲載して、それぞれの写真の大きさに合わせたウインドウを開く場合のサンプルを下記に掲載さます。 
 
 ・大きさの異なる写真を複数掲載した場合の サンプル31 です。

……………………………………………………………………………………………………………………

 「サブウインドウ」を表示する bQ


 サブウインドウの表示は出来るだけ本文に邪魔にならない位置に表示したい。しかも画面の大きさにも影響されないようにと、ここでは画面の右下にサブウインドウを表示する例を記載します。

◇サブウインドウの表示位置を右下に表示する「JavaScript」の記述。

・<HEAD>部の記載内容
<Script Language="JavaScript">
<!--
function openSubWin(url,name, wWidth,wHeight) {
sWidth = screen.availWidth;
sHeight = screen.availHeight;
x = sWidth - wWidth - 20;
y = sHeight - wHeight - 60;
newWin = window.open(url,name,"width="+wWidth+",height="+wHeight);
newWin.moveTo(x,y);
}
//-->
</Script>

・<BODY>部の記載内容
<a href="#" onClick='openSubWin("TestData/yogo1L.JPG","Subwin",500,380);return false'>
<img src="TestData/yogo1s.JPG" width="120" height="90" border="0"></a>

 x = sWidth - wWidth - 20;とy = sHeight - wHeight - 60;の数値はそれぞれ端に若干の隙間を作りました。(端に密着させるより、僅かでも隙間があるほうが画面が落ち着きます。)

 ・大きさの異なる写真を複数掲載した場合の サンプル32 です。

 

 
「ハイパーリンク」と「ロールオーバーイメージ」のテクニック  
 Dreamweaverの「ロールオーバーイメージの挿入」


 「ハイパーリンク」に「ロールオーバーイメージ」を使用することがありますが、ここでは「Dreamweaver」の「ロールオーバーイメージの挿入」を使用した場合の例を記載します。

 次項の「JavaScript」の記載内容は次の東リですが、「Dreamweaver」の記載はボリュームが大きいです。

・<HEAD>部の記載内容
<Script Language="JavaScript">
<!--
if (document.images) {
var imageData=new Array();
imageData[0]=new Image(),imageData[0].src="Data/woo1.gif";
imageData[1]=new Image(),imageData[1].src="Data/woo2.gif";
}
function gaChara(name,num) {
if (document.images) document.images[name].src=imageData[num].src;
}
//-->
</Script>

・<BODY>部の記載内容
<p><A HREF="Data/Subx.htm" onMouseOver='gaChara("ga1",1)'onMouseOut='gaChara("ga1",0)'>
<IMG SRC="Data/woo1.gif" BORDER="0" WIDTH="50" HEIGHT="50" NAME="ga1"></A>

……………………………………………………………………………………………………………………

 「ロールオーバーイメージ」


 「ハイパーリンク」に「ロールオーバーイメージ」を使用することがありますが、ここでは「Dreamweaver」の「ロールオーバーイメージの挿入」を使用せず、直接「JavaScript」で記載した場合の例を記載します。

 このテクニックはいたって基本的なものです。是非、習得して頂きたい技法です。ここではGIFアニメを使った例を記載しました。

 参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 「ロールオーバーイメージ」の応用 bP


 「ロールオーバーイメージ」のテクニックをもう一歩展開させて、別の場所の画像を変えて、Webサイト楽しんで頂く手法の一つです。これまでのクリックするこてによるに画像変えるのでなく、ロールオーバーした時に画像が変り、ロールアウトすると元に戻るのがミソである。

・<HEAD>部の記載内容
<Script Language="JavaScript">
<!--
if (document.images) {
var imaData=new Array();
imaData[0]=new Image(),imaData[0].src="Data/yogo2.jpg";
imaData[1]=new Image(),imaData[1].src="Data/yogo3.jpg";
imaData[2]=new Image(),imaData[2].src="Data/yogo4.jpg";
imaData[3]=new Image(),imaData[3].src="Data/yogo5.jpg";
}
function gaChara(name,num) {
if (document.images) document.images[name].src=imaData[num].src;
}
//-->
</Script>

・<BODY>部の記載内容
<A HREF="#" onMouseOver='gaChara("ga1",1)' onMouseOut='gaChara("ga1",0)'>
<IMG SRC="Data/Mark1.gif" BORDER="0" WIDTH="88" HEIGHT="30"></A></TD>

 参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 「ロールオーバーイメージ」の応用 bQ


 Webサイト楽しんで頂く手法の一つとして、「ロールオーバーイメージ」のテクニックをもう一歩展開させて、ロールオーバーの間画像を一定時間毎にページをめくるようーに変えるテクニックを紹介します。

 ロールオーバーした時に、画像の変化が止まります。

 参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

 

 
「背景」のテクニック  
 背景色を変える


 Webサイトに変化をもたせ楽しんで頂く手法の一つとして、色パレットの色を選択すると、背景色がその色に変わるテクニックを紹介します。

 ここでは透過された背景画像との組み合わせで、変化をもたせると同時に、文字の色も変えています。上手に利用すると面白いページを作ることが可能です。

 参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 背景色の三原色(赤・緑・青・明)を段階的に変化


 背景色の三原色(赤・緑・青と明度)少しずつ変化させることにより、多様な背景を選択できるようなテクニックを紹介します。

 ここでは#777777をベースにして、それぞれの三原色を66、55または88、99と少しずつ下げるか上げられます。

 参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 背景画像を変える


 Webサイトに変化をもたせ楽しんで頂く手法の一つとして、画像パレットから画像を選択すると、背景がその画像の変るテクニックを紹介します。

 その画像には図形の大小、透過、GIFアニメなどかなり多種の画像を利用できますから、結構楽しいページを作ることが可能です。

 参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

 

 
「メニュー」のテクニック  
 エクスプローラのような階層の「リンクメニュー」


 メニューにはいろいろなタイプがありますが、最初は親項目だけを表示して、親項目クリックすると子項目がエクスプローラ形式で表示されるテクニックを紹介します。

 ポイントとしては、クリックすると階層のリンクメニューが表示されるが、もう一回クリックするとリンクメニューが閉じることと、別の項目をクリックすると、これまで開いていたリンクメニューが閉じることです。

 このテクニックは「JavaScript」でもレベルの高い技法で、詳細の説明は省略します。参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 マウスを重ねると新たなメニューを表示


 親メニューにマウスを重ねると、子メニューが表示されます。但し上記のように縦長の方向でなく、親メニューを横に表示して、それぞれの子メニューを必要なときだけ縦方向に表示するなどの省スペースなレイアウトが可能です。

 子メニューを自由にレイアウトできるのも便利です。

 このテクニックは「JavaScript」でもレベルの高い技法で、詳細の説明は省略します。参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 同じページ内に別のページを表示


 Webサイト楽しんで頂く手法の一つとして、同じページ内に別のページを表示することが出来ます。サンプルのような可愛いページも楽しいのではとテクニックを紹介します。

 「ロールオーバーイメージ」の応用bPの変形とも言えまが、それぞれコンテンツに合った背景を設定するなどと楽しいページが作成できます。

 このテクニックは「JavaScript」でもレベルの高い技法で、詳細の説明は省略します。参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

 

 
「その他」のテクニック  
 文字層と背景の中間に画像を配置


 Webサイト楽しんで頂く手法の一つとして、文字層と背景の中間に画像を表示するテクニックを紹介します。

 この例では、文字層(挿入した画像を含む)と背景(画像と色)の中間に風景画を設置しました。この画像は不透明度を設定しました。
  style="filter:alpha(opacity=80)" で80に設定しました

 参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 マウスカーソルの後を追う画像群


 Webサイト楽しんで頂く手法の一つとして、マウスカーソルを動かすと画像群が付いていくテクニックを紹介します。

 よく見かけるテクニックですが、マウスカーソルの後を画像群が数珠繋ぎで続きます。ここでは全く同じ画像ですが、それぞれ画像を変えたり、大きさを変えて利、GIFアニメを使ったりろかなり多様に表現できます。

 参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 ウインドウ内を動きまわる画像


 Webサイト楽しんで頂く手法の一つとして、ウインドウ内を画像が動き回るテクニックを紹介します。

 このテクニックもよく見かけますが、ここでは同じ画像が四方の壁にぶつかるとはね返ります。それぞれ画像を変えたり、大きさを変えて利、GIFアニメを使ったりろかなり多様に表現できます。

 参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

……………………………………………………………………………………………………………………

 上から画像を降らす


 Webサイト楽しんで頂く手法の一つとして、上から画像を降らすテクニックを紹介します。

 雨、雪、桜、木の葉などとウィンドウ一杯に上から下へと画像をふらす、よく見かけるテクニックです。GIFアニメを使うことによりかなり多様に表現できます。

 参考資料としては「とむやん君のJavaScript講座」の「サンプルプログラム」をお勧めします。ここでは類似例も含めた解説をしています。

 

 

 


Design by unworldly man Teizo AMMA
Email amma@beach.ocn.ne.jp
URL http://www.t-amma.com/