JavaScriptでウィンクを！　Beaverland Net Art -- For Internet Artists

JavaScriptで
ウィンクを！

by Akira Kato

October 7, 2003

ジャバスクリプト・コードは次のようになります。

function goWink() {
document.head.src="../images/pinup35b.gif"
setTimeout("restore()",3000)
}

function restore() {
document.head.src="../images/spacer.gif"
setTimeout("goWink()",3000)
}

//----->
</script>

上の　goWink() というファンクションを、このページの　body タグの中に次のように書き込んであります。

onLoad　というのは　ジャバスクリプトでは「イベント・ハンドラー」と呼ばれているものの一つです。「イベント・ハンドラー」はたくさんあります。onClick　というのも、そのうちの一つですが、これについては、後ほど説明します。

この場合、何をするかというと、ウェブ・ページがあなたのブラウザーにロードされたら【読み込まれたら】、すぐにgoWink()という、上のコードで書かれたファンクションを実行します。

それで、ベティーさんがウィンクをし始めるわけです。どのようにウィンクさせるかは、必要な材料が出揃った後で説明します。

ベティーさんはこのようになっています。

The head of a cute pinup girl (pinup35c.gif--134x84)

上のボタンを
クリックして
私の顔の部分が
変わることを
確かめてくださいね。

変わる部分は、
私の絵の上に
重なっています。

ボタンをクリックすると、
３つの違った
カバーが私の絵の上に
重なることになります。

上のボタンのコードは次のようになっています。

顔の部分が上の説明にあるように、head という名前が付けられています。　この部分をジャバスクリプトで書くと次のようになります。

document.head.src

document はこのページのことです。　src　は source の略したものです。あなたのブラウザーがこの部分（head）を表示するために画像を保存するためのディスプレー・メモリーの場所のことです。

onClick というのは、先ほど触れた「イベント・ハンドラー」の一つで、この場合、ボタンをクリックすると、指定したステートメントを実行します。

onClick="実行させるステートメントをここに書きます。"

　のボタンをクリックすると次のステートメントを実行します。

document.head.src='../images/spacer.gif'

したがって、ボタンをクリックすると、イベント・ハンドラーが起動して、透明なカバー（spacer.gif）を顔の部分に移します。つまり、あなたのブラウザーが透明なカバーを指定した場所（document.head）に表示するわけです。

カバーは透明ですから、その下のベティーさんの顔が表れます。初めは不透明なカバー　（pinup35c.gif）　がベティーさんの顔を覆っている状態です。

どのようにheadを指定するの？

コードは次のようになっています。

ベティーさんの絵（pinup35.gif）は、実はテーブル（横が２７０ピクセルで縦が８１４ピクセルの大きさ）のバックグラウンド・イメージとして表示されています。

顔の部分は、バックグラウンド・イメージの上に乗っているわけです。しかも左上の小さな部分だけを占めています。この部分を、上のコードで示すように、IMG タグの中の　NAME　アトリビュートを使って指定します。

どのようにウィンクさせるの？

function goWink() {
document.head.src="../images/pinup35b.gif"
setTimeout("restore()",3000)
}

The winking face of a cute pinup girl (pinup35c.gif--134x84) このファンクション（goWink()）は２つのステートメントからできています。最初のステートメントはベティーさんが片目をつむった、右に示す絵（pinup35b.gif）を　document.head の部分へ移します。つまり、あなたのブラウザーがこの絵を顔の部分に表示します。

次のステートメントは、ジャバスクリプトにすでに含まれているファンクション（メソッドとも呼ばれる）です。　何をするかというと、３０００ミリセカンド、つまり３秒後に　restore() というファンクションを実行します。

restore()　は　goWink()　と良く似たファンクションです。

function restore() {
document.head.src="../images/spacer.gif"
setTimeout("goWink()",3000)
}

このファンクションも２つのステートメントから出来ています。最初のステートメントは、透明なカバーを顔の部分へ移します。つまり、あなたのブラウザーがこの透明なカバーを顔の部分に表示します。すると、透明ですから、下に隠されていたベティーさんの普通の表情が現れます。

２番目のステートメントは、前のファンクションで使ったのと同じ、出来合いのジャバスクリプト・メソッドです。実行させるファンクションを変えてあります。つまり、今度は３秒後に　goWink()　を実行させます。

要するに、この２つのファンクションは、３秒後に、お互いを呼び出すわけです。結果として、ベティーさんは３秒毎に片目をつむることになります。上の数字を変えることで、ウィンクする時間を短くしたり長くしたり調節できます。

透明なカバーって何ですか？

ウェブページで使えるピクチャーには大きき分けると２つの種類があります。JPG （JPEG）と GIF です。　 GIFには透過色のあるものとないものに分けることが出来ます。詳しいことはこのページ　(ウェブページで使えるイメージ) で説明しているので読んでください。新しいウィンドーが開きます。このページへ戻るには、そのウィンドーをクローズしてください。

透過色のある GIF イメージを作るにはどうすればいいの?

次のリンクをクリックして読んでください。

How to Create a Transparent GIF Image

関連リンク