≪ カツのGIFアニメ HOME   サイトマップ

   ■ ロールオーバー


  「ロールオーバー」。
  「マウスオーバー」「オンマウス」といった言い方もあります。
  アイコンにカーソルを乗せた時、その素材が変化したり動きます。

  HPを見ていて「こちらをクリック!」と書いてあるボタンをクリックしようと
  してカーソルを乗せると、ボタンの色が変化したりボタンを押したみたいに
  そのボタンが変化する事がありますよね。
  これが「ロールオーバー」です。ボタンだけではなく、素材を組み合わせ
  る事で面白い表現ができたりします。

  このページでは、その「ロールオーバー」の説明をしますのでみなさんいろ
  いろ工夫してみてください。





  上のロバの顔の上に、カーソルを乗せてみてください。
  ロバの顔の上にカーソルを乗せるとロバが笑い、カーソルをはなすと元の
  顔に戻ります。
  上で解説したボタンをロバの顔に変えた例です。
  最初に表示されている素材とカーソルを乗せた時に表示する素材を用意して
  「ロールオーバー」用のタグに組み込んで完成させます。

  上のロバを表示するには、素材 1 30×27 291b と 素材 2 30×27 290b を用意して、
  2つの素材を下のタグに組み込んで表示させます。

  ↓ このソースに組み込みます。↓
<IMG src="素材 1(最初に表示されてる素材)" border="0" onMouseOver="this.src='素材 2(カーソルを乗せた時、表示される素材)'" onMouseOut="this.src='素材 1(カーソルが離れた時、表示される素材'">



  こちらがリンクボタンの例です。
  カーソルを乗せると素材が変化して、クリックするとリンク先に飛びます。
  上のロバのロールオーバータグにリンクタグが追加されているものになり
  ます。
  ちなみに上のボタンはリンク先を指定してありませんのでクリックしても
  どこにも飛びません。

  ↓ リンクボタンなどに使う場合は、このソース。↓
<A href="リンク先">
<IMG src="素材 1(最初に表示されてる素材)" border="0" onMouseOver="this.src='素材 2(カーソルを乗せた時、表示される素材)'" onMouseOut="this.src='素材 1(カーソルが離れた時、表示される素材'">
</A>


  素材 2 に動く素材を使うと…? 
  素材の上にカーソルを乗せてみてください。

              

  ロールオーバー用素材はこちらにおいてあります。

  素材コーナーにも、組み合わせると使える物がありますので皆さんのイメージ
  で使ってみてください。リンクボタンの代わりに動物素材を使ったりしてもお
  もしろいですよね!


67×15 245b

   このエントリーをはてなブックマークに追加  

51×44 642b HP・メール素材 カツのGIFアニメ
KATU`S GIF ANIMATION
Copyright©2004 katu All right reserved.