梅ちゃん堂 > JavaScript 入門 > 実用 JavaScript サンプル >
- アニメーションボタン -

アニメーションボタンとは、マウスを当てたとき、マウスを押したとき、マウスを離したときに、 それぞれ異なった見え方をするボタンのことです。

スタイルシートのみを使った方法

Internet Explorer 4.x 以上、Netscape 6.0 で動作します。

PREVIOUS UP NEXT

まず HTML のヘッダ部、もしくは外部スタイルシートファイルで、各スタイルを規定します。 スタイル内容は、自由に変更・追加できます。

SPAN.normal {
  border: none;
  background-color:  silver;
  padding: 3pt;
  color: black;
}
.up {
  border: outset thin;
  background-color: silver;
  padding: 3pt;
  color: blue;
}
.down {
  border: inset thin;
  background-color: silver;
  padding: 3pt;
  color: red;
}

本体部分は次のようにします。PREVIOUSUPNEXT の部分は別の字句に変えることが出来ます。*** にはリンク先のファイル名、もしくは URL を入れます。

<P style="background-color: silver; text-align: center; padding: 5pt;">
  <SPAN class="normal" onmouseover="this.className='up'" onmousedown="this.className='down'" onmouseout="this.className='normal'" onClick="location.href='***'">PREVIOUS</SPAN>
  <SPAN class="normal" onmouseover="this.className='up'" onmousedown="this.className='down'" onmouseout="this.className='normal'" onClick="location.href='#top'">UP</SPAN>
  <SPAN class="normal" onmouseover="this.className='up'" onmousedown="this.className='down'" onmouseout="this.className='normal'" onClick="location.href='***'">NEXT</SPAN>
</P>

この方法は簡単ですが、Netscape 4.x や Opera 6.x では正常に動作しないことや、 スタイルシートで決められた表示しかできない欠点があります。

画像を使った方法

Internet Explorer 4.x 以上、Netscape 4.x 以上、Opera 6.x 以上で動作します。

戻る 上へ 次へ

画像の上にマウスカーソルを置いたときと、マウスボタンを押し下げたときに異なった画像が表示されるわけですから、 1つのボタンについて3種類の画像を用意する必要があります。

戻る標準の画像(デフォルト表示・マウスカーソルを離したとき)
戻るマウスカーソルを置いたとき
戻るマウスボタンを押し下げたとき

上のサンプルでは、マウスカーソルを置いたときにボタンが浮き上がって見え、 マウスボタンを押し下げたときにボタンが下がって見える効果を狙っています。

もちろんこれはサンプルですから、必ずそうしなければいけないというわけではありません。 あなたのアイデアとデザイン力を生かして様々なアニメーションボタンを作ることが出来ます。

画像は必ず <A> タグとセットで、次のように設定します。

<A href="(リンク先)" onMouseOver="document.(画像名).src='(マウスを置いたときの画像アドレス)'" onMouseOut="document.(画像名).src='(標準画像のアドレス)'" onmousedown="document.(画像名).src='(マウス押し下げ時の画像アドレス)'">
<IMG src="(標準画像のアドレス)" name="(画像名)" width=(画像の幅) height=(画像の高さ) alt="画像の説明" border=0>
</A>

例えば画像名を 'ani_btn' とし、標準画像のアドレスを 'normal.png'、マウスを置いたときの画像アドレスを 'over.png'、マウス押し下げ時の画像アドレスを 'down.png' とすると、

<A href="(リンク先)" onMouseOver="document.ani_btn.src='over.png'" onMouseOut="document.ani_btn.src='normal.png'" onmousedown="document.ani_btn.src='down.png'">
<IMG src="normal.png" name="ani_btn" width=(画像の幅) height=(画像の高さ) alt="画像の説明" border=0>
</A>


となります。

ボタンが複数ある場合は、必ず画像名を別々にして下さい。

前ページに戻る 前ページに戻る 次ページに進む
Copyright © 2003 梅ちゃん堂. All Rights Reserved