|
|
| butoff.jpg |
buton.jpg |
上のボタンは、右に示すような２種類のボタンからできています。５段目のボタンのコードは次のようになっています。
<a href="javascript:document.kiss.play()"
onMouseOver="document.button5.src=
'../images/buton.jpg'"
onMouseOut="document.button5.src=
'../images/butoff.jpg'">
<img name="button5" src="../images/butoff.jpg"
ALT="small red button off (18x18)"
width="18" height="18" border="0"></a>
マウスのポインターをボタンの上に持ってゆくと、ボタンが大きくなります。
ポインターをボタンから遠ざけると、ボタンが小さくなります。これを、上に示すようにジャバスクリプトを使って、コントロールしているわけです。
上のコードでは、ボタンに button5 という名前を与えて、このオブジェクトに対して、
いろいろと働きかけているわけです、
この場合には、ボタンの２種類のイメージを差し替えているわけです。
IMG タグの中で name= アトリビュートを使い、butoff.jpg というイメージ・オブジェクトに
button5 という名前を与えています。
ジャバスクリプトでは、このページに示すような、イメージとか、サウンドファイルをすべてオブジェクト （働きかける対象となる物体） という考え方で、取り扱っています。
つまり、ジャバスクリプトのファンクション （あるいはメソッドとも呼ばれる） は、このオブジェクトに対して働きかけるわけです。
このページ全体も document というオブジェクトとして扱っています。
document.button5.src='../images/buton.jpg'
したがって、ジャバスクリプトの、上のステートメントは次のような意味になります。
buton.jpg というイメージを、このページ (document) の button5
という名前のオブジェクトが占めている場所、もっと具体的には、 ブラウザーが表示しようとするメモリー (src 「これは source の略です。」) に移しなさい。
document.kiss.play()
上のステートメントは次のような意味になります。
このページ (document) の kiss
という名前のサウンド・オブジェクトを演奏・実行しなさい。このplay() というのは、ジャバスクリプトに、すでに組み込まれている
サウンド・ファイルを演奏・実行するファンクションです。
kiss は EMBED タグを使って、次のように設定されています。
<EMBED MASTERSOUND src="../sound/kiss.wav"
name="kiss" loop="false"
autostart="false"
hidden="true">
EMBED タグの使い方は、このページ （簡単なジューク・ボックスの作り方） を見ると分かります。新しいページが開きます。
このページへ戻るには新しいページを閉じてください。
EMBED タグの、面白い、愉快な使い方は、このページ (VOID(0)って何？どう使うの？) を見てください。具体例のセクションへダイレクトに案内します。
新しいページが開きます。
アンカータグとジャバスクリプトの使い方は、このページ(アンカー・タグとジャバスクリプト)を見てください。新しいページが開きます。
onMouseOver や onMouseOut イベント・ハンドラーと呼ばれます。
この使い方については、このページ(イベント・ハンドラーってどうやって使うの？)を見てください。新しいページが開きます。
ジャバスクリプトを使うと、このようなボタンが作れるという例で、もっと簡単にやりたければ、ジャバスクリプトを使わずに、下のようにするのも一つの方法です。
| 下のボタンをクリックして教えて！ |
|
|
絶対に、嫌い！ |
|
|
分かんないなー |
|
|
どうしようかなー。。。困っちゃうなあー。。。 |
|
|
ゴンベイちゃん、好きになってあげてもいいわよ。 |
|
|
あたしも、愛しているわ！キスしてちょうだい！ |
ジャバスクリプトを使わないデモのコードは、以下に示すようになります。
<a name="thisTable"></a>
<table>
<tr><td bgcolor="black">
<a href="#sonna">
<img src="../images/butoff.jpg" ALT="small red button"
width="18" height="18" border="0"></a></td>
<td>絶対に、嫌い！</td></tr>
. . .
. . .
. . .
</table>
<a name="sonna"></a>
そんなきつい事を言わないで欲しいなー。。。
<a href="#thisTable">戻る</a>
|
そんなきつい事を言わないで欲しいなー。。。
 |
どうしてー分かんないの？
|
はっきり、言って欲しいのになあー。
|
僕も好き、好きです。あーあ、しあわせだなあー。。。
|
唇が止まっている場合には、あなたの
マウス（ポインター）を唇の上に持ってゆくと、
また動き出します。