Animation ICON?

はじめに、このJavaScriptを使用したアイコンには、以下のような問題があります・・・。
  • 一つのアイコンを表示させる為に、サーバーに3つのアイコンを用意する必要がある。

  • アニメーションGIFとは異なり、3つそれぞれのアイコンを読み込むため、多少重くなってしまう。
    また、読み込みが完了していない場合、各イベントにおいて、壊れた画像が表示されてしまう。

  • NetscapeNavigatorではバージョン３．０以上、InternetExplorerではバージョン４．０以上のブラウザのみ対応。

  • 上記ブラウザでも、Javaの設定を無効にされると、未対応のブラウザ同様、全く機能しない。

  • JavaScriptをHTMLソースに記述する必要がある為、通常のリンク用のアイコンに比べると、リンクで使用してもらうには無理がある・・・（企画そのものに無理があるような気も・・）。
といった感じです。

ただ、アイデア次第では、これらの欠点を十分に補えるぐらいの、魅力的な効果を持ったアイコンの作成ができます！（でも、リンク用として考えるのは、やはり疑問が・・・）

これから紹介するJavaScriptを使った、リンク用アイコンの作成（正確にはリンク用のアイコンをJavaScriptでアレンジ）には、3つのアイコンを使用します。

１つ目は通常表示されるアイコン、２つ目はマウスポインタをそのアイコンの上に持ってきた時に表示されるアイコン、３つ目はそのアイコンをクリックした時に表示されるアイコンです。
アイコンの作成については[ICON?]のページをご覧ください。

前ページの「NextPage」アイコンを例に取り見てみましょう。
このボタンは以下の三つのアイコンにより生成されています。

  1. デフォルトで表示されるアイコン

  2. マウスカーソルをアイコンの上に持ってきた際に表示されるアイコン。

  3. アイコンをクリックした時に表示されるアイコン。

この様に３つのアイコンを用意し、これから紹介するJavaScriptを使用することで、前ページのようなリンク用のアイコンが完成します。
次のページでは、いよいよこのページの本題？でもある、JavaScriptのサンプルソースを紹介します！

戻る HOME 次へ