JavaScript

はじめに
ここのページは、もっとホームぺージを楽しく作成したい個人の方を対象しています。基本的なHTMLは少しは知っている必要がありますので先にHTMLの基本のページも見ておいて下さいね。　　ここでは難しい説明はしませんが、すぐにホームページに活かせるサンプルを中心に紹介していきます。 対応Webブラウザはinternet Exploer5.0xで動作確認をしています。
その他のWebブラウザや違うバージョンでは動作確認をしていませんので御了承ください
目次　（少しずつ更新しています）
1.ステータスバーにメッセージを流します。時計付ですよ。 2.ステータスバーにメッセージを流します（スクロール）
3.ウィンドウの中でメッセージが縦に流れます 4.マウスが文字に乗ったらコメント（画像）を開きます！
5.日替わりで背景色を変更します！ 6.日替わりで背景画像を変更します！
7.日替わりで文字色を変更します！ 8.画像がマウスを避けます！
9.１文字ずつ文字を表示します！ 10.マウスが乗ったら背景画像を変更します！
11.クリッカブルマップ上にマウスが乗ったらレイヤー表示！ 12.ポップアップメニューで画像を変更します！
13.画像にマウスが乗ると画像を変えます！ 14.マウスが乗ると画像のサイズを変更します！
15.ページ移動時に効果を付ける！
1.ステータスバーにメッセージを流します。時計付ですよ。
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<META name="javascript" content="terachan">
<TITLE>WAIPU</TITLE>
<SCRIPT Language="JavaScript">
<!--
timeID = 10;
stcnt = 16;
msg = "このように、ステータスバーにメッセージと時計を表示します！ ";
wmsg = new Array(32);
wmsg[0]=msg;
blnk = "                                                               ";
for (i=1; i<32; i++)
{
b = blnk.substring(0,i);
wmsg[i]="";
for (j=0; j<msg.length; j++) wmsg[i]=wmsg[i]+msg.charAt(j)+b;
}
function wiper()
{

ct = new Date();
h = "0"+ct.getHours();
m = "0"+ct.getMinutes();
s = "0"+ct.getSeconds();
h = h.substring(h.length-2,h.length+1);
m = m.substring(m.length-2,m.length+1);
s = s.substring(s.length-2,s.length+1);
cl = "現在時刻 [ "+h+":"+m+":"+s+" ]  ";
if (stcnt > -1) str = wmsg[stcnt]; else str = wmsg[0];

if (stcnt-- < -40) stcnt=31;
status = cl+str;
clearTimeout(timeID);
timeID = setTimeout("wiper()",100);
}
// -->
</SCRIPT>
</HEAD>
</HEAD>
<BODY onLoad="wiper()">
</BODY>
</HTML>

サンプル表示

<HEAD>・・・</HEAD>の間に左の赤いプログラムをコピーして貼り付けて下さい。黄色い部分が表示する文字です。自由に変更して下さい。

<BODY に左記の紫色のプログラムを追加いてください。
2.ステータスバーにメッセージを流します（スクロール）
<HTML>
<HEAD>
<META name="GENERATOR" content="NEC ホームページデザイナー">
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<META name="javascript" content="terachan">
<TITLE>sanpul2</TITLE>
<SCRIPT language="JavaScript">
<!--
stcnt = 0;
msg = "このようにメッセージがスクロールします！";
blnk = "                                              ";
str = blnk + blnk + blnk + msg;
timeID = 10;
function scroller()
{
ct = new Date();
h = "0"+ct.getHours();
m = "0"+ct.getMinutes();
s = "0"+ct.getSeconds();
h = h.substring(h.length-2,h.length+1);
m = m.substring(m.length-2,m.length+1);
s = s.substring(s.length-2,s.length+1);
cl = "現在時刻 [ "+h+":"+m+":"+s+" ]  ";
       status = cl+str.substring(stcnt++,str.length+1);
if (stcnt>str.length) stcnt=0;
clearTimeout(timeID);

       timeID = setTimeout("scroller()",100);
}
// -->
</SCRIPT>
</HEAD>
<BODY onLoad="scroller()">
</BODY>
</HTML>

サンプル表示

<HEAD>・・・</HEAD>の間に左の赤いプログラムをコピーして貼り付けて下さい。黄色い部分が表示する文字です。自由に変更して下さい。

<BODY に左記の紫色のプログラムを追加いてください。
3.ウィンドウの中でメッセージが縦に流れます
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<META name="javascript" content="terachan">
<TITLE>サンプル３</TITLE>
<SCRIPT Language="JavaScript">
<!--
br = unescape("%0A");
s = navigator.appVersion.charAt(5).toUpperCase();
if(s=="M") br = unescape("%0D");
if(s=="W") br = unescape("%0D")+br;
num = 21;
stf = new Array(num);
stf[0]=br;stf[1]=br;stf[2]=br;stf[3]=br;stf[4]=br;stf[5]=br;
stf[6]="ここに文字を書きます！ "+br;
stf[7]="つぎつぎと文字が　　　　　　　　　　　"+br;
stf[8]="スクロールします　　。 "+br;
stf[9]="色々なメッセージを "+br;
stf[10]="流してみて下さい！　　 "+br;
stf[11]="・・・・・・・・・・・・ "+br;
stf[12]="・・・・・・・・・・・・ "+br;
stf[13]="という事です。　　terachan "+br;
stf[14]=br;stf[15]=br;stf[16]=br;stf[17]=br;stf[18]=br;stf[19]=br;
stf[20]=br;
cnt = 0;
timeID = 10;function roll()
{
str = "";
for (i=0; i<5; i++) str += stf[i+cnt];
document.stuff.stuffroll.value = str;
cnt++;
if (cnt>=num-5) cnt=0;
clearTimeout(timeID);
timeID = setTimeout('roll()',500);
}
// -->
</SCRIPT>
</HEAD>
<BODY bgColor="white" onLoad="roll();">
<FORM name="stuff">
<TEXTAREA name="stuffroll" ROWS="5" COLS="80" WRAP="PHYSICAL">
</TEXTAREA>
</BODY>
</HTML>

サンプル表示

<HEAD>・・・</HEAD>の間に左の赤いプログラムをコピーして貼り付けて下さい。黄色い部分が表示する文字です。自由に変更して下さい。

<BODY に左記の紫色のプログラムを追加いてください。
4.マウスが文字に乗ったらコメント（画像）を開きます！
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<META name="javascript" content="terachan">
<TITLE>サンプル４</TITLE>
<STYLE TYPE="text/css">
<!--
.chip { position:absolute;
visibility:hidden;
       background-color:#FFFFA0;
       border:1px black solid;
     }
--></STYLE>
<SCRIPT Language="JavaScript">
<!--
function showChipHelp(cName,x,y)
{
var offX = offY = 0;
if (document.layers) chipOBJ = document.layers[cName];
if (document.all)    chipOBJ = document.all[cName].style;
if (chipOBJ.visibility.charAt(0) == "v") return;
if (document.all)
{
offX = document.body.scrollLeft;
offY = document.body.scrollTop;
}
chipOBJ.visibility = "visible";
chipOBJ.left = x + offX;
chipOBJ.top  = y + offY;
setTimeout("hideChipHelp('"+cName+"')",3000);
}

function hideChipHelp(cName)
{
if (document.all)    document.all[cName].style.visibility = "hidden";
if (document.layers) document.layers[cName].visibility    = "hidden";
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
<A HREF="#" onMouseover="showChipHelp('c01',event.x,event.y)">こっちは文字のヘルプ</A><BR><BR><BR><BR>
<A HREF="#" onMouseover="showChipHelp('c02',event.x,event.y)">こっちは画像と文字のヘルプ</A><BR>
<DIV ID="c01" CLASS="chip">こんな具合に表示されます。</DIV>
<DIV ID="c02" CLASS="chip"><IMG SRC="sakura_1.gif">画像もOK</DIV>
</BODY>
</HTML>

サンプル表示

<HEAD>・・・</HEAD>の間に左の赤いプログラムをコピーして貼り付けて下さい。黄色い部分が表示する文字です。自由に変更して下さい。

<BODY に左記の紫色のプログラムを追加いてください。
5.日替わりで背景色を変更します！
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<META name="javascript" content="terachan">
<TITLE>サンプル５</TITLE>
<SCRIPT Language="JavaScript">
<!--
function setBGColor()
{
var colName = new Array("black","blue","magenta","green","cyan","yellow","gray");
return colName[(new Date()).getDay()];
}
// -->
</SCRIPT>
</HEAD>
<SCRIPT Language="JavaScript">
<!--
document.write("<BODY BGCOLOR='"+setBGColor()+"'>");
// -->
</SCRIPT>
</BODY>
</HTML>

サンプル表示

<HEAD>・・・</HEAD>の間に左の赤いプログラムをコピーして貼り付けて下さい<BODY に左記の紫色のプログラムを追加いてください！

日にちが変わらないと背景色は変わらないです！
6.日替わりで背景画像を変更します！
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<META name="javascript" content="terachan">
<TITLE>サンプル６</TITLE>
</HEAD>
<SCRIPT Language="JavaScript">
<!--
xMax  = 3;//　最大背景画像数
xFile = ((new Date()).getDate()) % xMax + ".jpg";
document.write("<BODY BACKGROUND='"+xFile+"'>");
// -->
</SCRIPT>
日替わりで背景画像を変える<BR>
</BODY>
</HTML>		 <BODY に左記の紫色のプログラムを追加いてください！
>黄色い部分が背景画像数です。３枚の場合、各画像のファイル名は  
"o.jpg" 1.jpg" 2.jpg"で同一フォルダに作成してください。
7.日替わりで文字色を変更します！
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<META name="javascript" content="terachan">
<TITLE>サンプル７</TITLE>
<SCRIPT Language="JavaScript">
<!--
function setTextColor()
{
var colName = new Array("black","blue","magenta","green","cyan","yellow","gray");
return colName[(new Date()).getDay()];
}
// -->
</SCRIPT>
</HEAD>
<BODY>
<SCRIPT Language="JavaScript">
<!--
document.write("<FONT COLOR='"+setTextColor()+"'>");
// -->
</SCRIPT>
今日の色
</FONT>
</BODY>
</HTML>

<HEAD>・・・</HEAD>の間に左の赤いプログラムをコピーして貼り付けて下さい。黄色い部分が表示する文字です。自由に変更して下さい。

<BODY に左記の紫色のプログラムを追加いてください。
8.画像がマウスを避けます！
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<META name="javascript" content="terachan">
<TITLE>サンプル８</TITLE>
<STYLE TYPE="text/css">
<!--
#myChar { position:absolute; top:200px; left:200px; }
--></STYLE>
<SCRIPT Language="JavaScript">
<!--
function moveChar()
{
var oBODY = document.body;
var cx = myChar.style.posLeft;
var cy = myChar.style.posTop;
var sx = sgn(event.x,cx+24);
var sy = sgn(event.y,cy+24);
cx = cx + sx*6;
cy = cy + sy*6;
if (cx < 1) cx = 0;
if (cx > oBODY.clientWidth)  cx = oBODY.clientWidth;
if (cy < 1) cy = 0;
if (cy > oBODY.clientHeight) cy = oBODY.clientHeight;
myChar.style.posLeft= cx;
myChar.style.posTop = cy;
}
function sgn(a,b)
{
if (a < b) return 1; else return -1;
}
if (document.all) document.onmousemove = moveChar;
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
<IMG SRC="sakura_1.gif" ID="myChar" width="48" height="48">
</BODY>
</HTML>

サンプル表示

<HEAD>・・・</HEAD>の間に左の赤いプログラムをコピーして貼り付けて下さい。<BODY に左記の紫色のプログラムを追加いてください。黄色い部分が表示する画像です。自由に変更して下さい。
9.１文字ずつ文字を表示します！
<HTML>
<HEAD>
<META http-equiv="Content-Type" content="text/html; charset=x-sjis">
<META name="javascript" content="terachan">
<TITLE>サンプル９</TITLE>
<STYLE TYPE="text/css">
<!--
#theTEXT { width:320px; background-color:#FFFFDF; }
--></STYLE>
<SCRIPT Language="JavaScript">
<!--
str   = "ここに１文字ずつ表示するための文字を";
str  += "記述します。長い場合はstr+=で複数行に";
str  += "渡って連結していきます。";
pStr  = "";
count = 0;
function out1Char()
{
if ((count < str.length) && document.all)
{
pStr += str.charAt(count++);
theTEXT.innerText = pStr;
setTimeout("out1Char()",250);
}
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white" onLoad="out1Char()">
<DIV ID="theTEXT"></DIV>
</BODY>
</HTML>

サンプル表示

<HEAD>・・・</HEAD>の間に左の赤いプログラムをコピーして貼り付けて下さい。黄色い部分が表示する文字です。水色のカラーコードは文字の背景色です。自由に変更して下さい。

<BODY に左記の紫色のプログラムを追加いてください。
10.マウスが乗ったら背景画像を変更します！
<HTML>
<HEAD>
<TITLE>サンプル１０</TITLE>
<SCRIPT Language="JavaScript">
<!--
//　背景画像を変更
function chanegBG(bgName)
{
if (document.all)
{
document.body.style.backgroundImage = "url("+bgName+")";
}
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white" BACKGROUND="0.jpg">
マウスが乗ったら背景画像を変える<BR>
<BR>
<A HREF="#" onMouseover="chanegBG('0.jpg')">背景画像その１に変更</A><BR>
<A HREF="#" onMouseover="chanegBG('1.jpg')">背景画像その２に変更</A><BR>
<A HREF="#" onMouseover="chanegBG('2.jpg')">背景画像その３に変更</A><BR>
</BODY>
</HTML>

サンプル表示

<HEAD>・・・</HEAD>の間に左の赤いプログラムをコピーして貼り付けて下さい。

<BODY>・・・</BODY> に左記の紫色のプログラムを追加いてください。黄色い部分が表示する文字と画像ファイルです。自由に変更して下さい。
11.クリッカブルマップ上にマウスが乗ったらレイヤー表示！
<HTML>
<HEAD>
<TITLE>サンプル１１</TITLE>
<STYLE TYPE="text/css">
<!--
.lay { position:absolute;
      width:100px;visibility:hidden;
      background-color:#FFFFC0;
      color:black; font-size:10px;
    }
-->
</STYLE>
<SCRIPT Language="JavaScript">
<!--
X = Y = 0;
function showLayer(layName)
{
document.all[layName].style.visibility = "visible";
document.all[layName].style.left = X;
document.all[layName].style.top  = Y;
setTimeout("hideLayer('"+layName+"')",2000);
}
function hideLayer(layName)
{
document.all[layName].style.visibility = "hidden";
}
function getXY()
{
X = event.x;
Y = event.y;
}
document.onmousemove = getXY;
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
クリッカブルマップ上にマウスが乗ったらレイヤー表示<BR>
<IMG SRC="japan.GIF" BORDER="0" USEMAP="#japan">
<MAP NAME="japan">
<area href="#" coords="0,187,26,218" SHAPE="rect"  onMouseover="showLayer('okinawa')">
<area href="#" coords="37,149,18" SHAPE="circle"   onMouseover="showLayer('kyusyu')">
<area href="#" coords="83,145,14" SHAPE="circle"   onMouseover="showLayer('shikoku')">
<area href="#" coords="126,53,126,53,109,67,109,82,95,88,92,76,85,77,83,91,48,
120,52,136,68,136,100,124,125,138,141,132,156,111,161,81,149,62,125,53" SHAPE="polygon" onMouseover="showLayer('honsyu')">
<area href="#" coords="117,2,173,47" SHAPE="rect"  onMouseover="showLayer('hokkaidou')">
</MAP>
<DIV ID="hokkaidou" CLASS="lay">北海道です</DIV>
<DIV ID="honsyu"    CLASS="lay">本州です</DIV>
<DIV ID="shikoku"   CLASS="lay">四国です</DIV>
<DIV ID="kyusyu"    CLASS="lay">九州です</DIV>
<DIV ID="okinawa"   CLASS="lay">沖縄です</DIV>
</BODY>
</HTML>

サンプル表示

<HEAD>・・・</HEAD>の間に左の赤いプログラムをコピーして貼り付けて下さい。

<BODY>・・・</BODY> に左記の紫色のプログラムを追加いてください。黄色い部分が画像のマウス領域です。。水色は表示する文字の変数と文字です。

＜画像の領域座標＞

画像の左上が原点になります。SHAPE="は形状を設定します。

・領域が四角の場合・・・SHAPE="rect" coords="x,y,x,y"

・領域が正円形の場合・・・SHAPE="cirle" coords="x,y,r"

・領域が多角形の場合・・・SHAPE="poly" coords="x,y,x,y,x,y,x,y,・・・"
12.ポップアップメニューで画像を変更します！
<HTML>
<HEAD>
<TITLE>サンプル１２</TITLE>
<SCRIPT Language="JavaScript">
<!--
//　指定画像を変更
function changeImage(imgName,selOBJ)
{
if (document.images) document.images[imgName].src = selOBJ.options[selOBJ.selectedIndex].value;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
<FORM NAME="myFORM">
<SELECT NAME="mySEL" onChange="changeImage('myIMG',this)">
<OPTION VALUE="jvn007tn.jpg">一枚目の画像
<OPTION VALUE="jvn008tn.jpg">二枚目の画像
<OPTION VALUE="jvn009tn.jpg">三枚目の画像
</SELECT>
</FORM>
<IMG SRC="jvn007tn.jpg" NAME="myIMG">
<BR>
</BODY>
</HTML>

サンプル表示

<HEAD>・・・</HEAD>の間に左の赤いプログラムをコピーして貼り付けて下さい。

<BODY>・・・</BODY> に左記の紫色のプログラムを追加いてください。黄色い部分が表示画像です。三枚以上は<OPTION VALUE="jvn010tn.jpg">四枚目の画像のように追加してください。
13.画像にマウスが乗ると画像を変えます！
<HTML>
<HEAD>
<TITLE>サンプル１３</TITLE>
<SCRIPT Language="JavaScript">
<!--
function preloadImage(imgName)
{
if (document.images) (new Image()).src = imgName;
}
//
//　先読みする２枚目の画像ファイル名を指定
//
preloadImage("jvn009tn.jpg");
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
画像の上にマウスを乗せてみて！<BR>
<A HREF="#" onMouseover="document.BTN.src='jvn009tn.jpg'"
           onMouseout ="document.BTN.src='jvn007tn.jpg'">
<IMG SRC="jvn007tn.jpg" NAME="BTN" BORDER="0">
</A>
</BODY>
</HTML>

サンプル表示

<HEAD>・・・</HEAD>の間に左の赤いプログラムをコピーして貼り付けて下さい。

<BODY>・・・</BODY> に左記の紫色のプログラムを追加いてください。黄色い部分が表示画像です。
14.マウスが乗ると画像のサイズを変更します！
<HTML>
<HEAD>
<TITLE>サンプル14</TITLE>
<SCRIPT Language="JavaScript">
<!--
function setImageScale(theImg,w,h)
{
theImg.width  = w;
theImg.height = h;
}
// -->
</SCRIPT>
</HEAD>
<BODY BGCOLOR="white">
画像のサイズを変更<BR>
<IMG SRC="jvn009tn.jpg" WIDTH="90" HEIGHT="60"
    onMouseover="setImageScale(this,160,120)"
    onMouseout ="setImageScale(this, 90, 60)">
</BODY>
</HTML>

サンプル表示

<HEAD>・・・</HEAD>の間に左の赤いプログラムをコピーして貼り付けて下さい。

<BODY>・・・</BODY> に左記の紫色のプログラムを追加いてください。黄色い部分が画像です。水色の部分が画像サイズです。
15.ページ移動時に効果を付ける！
<HTML>
<HEAD>
<TITLE>サンプル15</TITLE>
<META http-equiv="Page-Enter" content="revealTrans(Duration=3.0,Transition=12)">
<META http-equiv="Page-Exit" content="revealTrans(Duration=3.0,Transition=6)">
<META http-equiv="Site-Enter" content="revealTrans(Duration=3.0,Transition=12)">
<META http-equiv="Site-Exit" content="revealTrans(Duration=3.0,Transition=6)">
</HEAD>

サンプル表示

Page-Enter：同サイト内から来たとき
Page-Exit：同サイト内の他ペ−ジへ行くとき
Site-Enter：別のサイトから来たとき
Site-Exit：別のサイトへ飛ぶとき

Duration=3.0は変化かかる秒数
Transition=12はフィルターの種類
0 Box In
1 Box Out
2 Circle In
3 Circle Out
4 Wipe Up
5 Wipe Down
6 Wipe Right
7 Wipe Left
8 Vertical Blinds
9 Horizontal Blinds
10 Checker Board Across
11 Checker Board Down
12 Random Dissolve  
13 Split Vertical In
14 Split Vertical Out
15 Split Horizontal In
16 Split Horizontal Out
17 Strips Left Down
18 Strips Left Up
19 Strips Right Down
20 Strips Right Up
21 Random Bars Horizontal
22 Random Bars Vertical
23 Random