光るアイコン

作成:09.23.1998
改訂:--.--.--

FMOD LWS sample1


今回は番外編として、皆様からご質問の多かった、「マウスを持っていくとちょっとだけ強調表示されるボタン」の作成方法をご紹介します。
Photoshopだけでひょいと作れればいいのですが、これはImageReady(Photoshop5.5以上には同梱)を使用するか、JavaScriptがないと実現できません。
今回はまずPhotoshopでアイコンイメージを作成し、これを利用するJavaScriptを書きます。なおJavaScriptの文法など詳細については市販の書籍、他のサイトなどをご参照願います。
  • 材料 特になし
  • 道具 Adobe Photoshop5.0J、任意のテキストエディタ(HTML文書記述用)
  • ブラウザ Netscape navigator 3.0、Microsoft InternetExplorer4.0以上でないとうまく動作しません。


  1. 新規ファイルの作成
    今回はPhotoshopで100×100ピクセル、72dpiのファイルを新規作成し、黒色で塗りつぶしておきました。
  2. 文字の入力
    円形選択ツール()でアイコンの型を作ります。固定的にいくつもの円形を描きたい場合は、オプションパレットで、「固定」を選択し、ピクセル値を指定します。



  3. 選択範囲を記録
    後で選択範囲を解除してしまった時のため、一応、[選択範囲]メニューの[選択範囲を保存...]で選択範囲をアルファチャンネル1に記録しておきます。

  4. 新規レイヤーを作成
    レイヤー・パレットのメニュー(右上の三角マーク)から、「新規レイヤーの作成」をクリックして新規のレイヤー(レイヤー1)を作成します。


  5. レイヤーにアイコンの型を描画
    選択範囲を保持したままの状態で、[編集]メニューの[塗りつぶし...」を選択して、「レイヤー1」に円形の塗りつぶしを作ります。


  6. アイコンを完成
    文字マスクツールを使用して、アイコンになる文字の選択範囲を作成します。ここではHelvetica Blackの48ポイントを使用しています。



    Deleteキーを押すと、先ほどの塗りつぶし範囲が削除され、背景が見えるようになります。



  7. レイヤーを複製する
    「背景」レイヤーと「レイヤー1」をそれぞれ複製(レイヤーパレットのメニューから[レイヤーを複製]を選択)し、パレット上をドラッグして図のように位置を調整します。

  8. 変化のあるアイコンを作る
    「レイヤー1のコピー」をアクティブにしてから、[レイヤー]メニューの[効果]で[外側光彩...]を選びます。
    今回はぼかしを「15」にした他は、デフォルトのままで適用しました。
  9. レイヤーを2つにする
    「レイヤー1のコピー」を「背景のコピー」に、「レイヤー1」を「背景」にそれぞれ、レイヤーパレットのメニューから[下のレイヤーと結合」選択して結合させます。

  10. 2つのレイヤーをそれぞれ別ファイルに
    先のステップでできたレイヤーをそれぞれ、[選択範囲]メニューの[すべて選択]で選んでから、[編集]メニューの[コピー」を実行、更に[ファイル]メニューの[新規作成...]を実行して新しい画像(コピーもとと同じ大きさの画像)を作り、そこへ[編集]メニューの[ペースト]で別のファイルとします。

    今回は、外側光彩をかけたものを「buttonkan01.gif」、ノーマル状態のものを「buttonkan02.gif」としました。
    なお、GIFに変換するときのインデックスカラーパレットでは、色を削減しすぎないように注意してください。


  11. JavaScriptを記述
    アイコンを使用するHTMLファイルで、次のように記述します。この例では、ブラウザの種類とバージョンを判断し、対応できないブラウザではエラーが出ないように(イメージは通常表示になるように)しています。

    <HTML>
    <HEAD>
    <TITLE></TITLE>
    <SCRIPT LANGUAGE="JavaScript">
    <!--
    window.error = null;
    var ver;

    //ブラウザのバージョンを取得
    browserName = navigator.appName;
    browserVer = parseInt(navigator.appVersion);
    verText = navigator.appVersion;

    //ブラウザのバージョンを判定
    if (browserName == "Netscape" && browserVer >= 3) ver = "nn3";
    else if (browserName == "Microsoft Internet Explorer" && browserVer == 4) ver = "ie4";

    //Netscape Navigaor3.0以上あるいはMicrosoft Internet Explorer4.0以上なら実行
    if (ver == "nn3" || ver == "ie4")
    {
    sampleon = new Image(100,100);
    sampleon.src = "buttonkan01.gif";
    sampleoff = new Image(100,100);
    sampleoff.src = "buttonkan02.gif";
    }

    //マウスポインタが乗ったときに実行される関数
    function img_act(imgName) {
    if (ver == "nn3" || ver == "ie4")
    {
    imgOn = eval(imgName + "on.src");
    document [imgName].src = imgOn;
    }
    }

    //マウスポインタが外れたときに実行される関数
    function img_inact(imgName) {
    if (ver == "nn3" || ver == "ie4")
    {
    imgOff = eval(imgName + "off.src");
    document [imgName].src = imgOff;
    }
    }

    // -->
    </SCRIPT>
    </HEAD>

    <BODY>
    <CENTER>

    <!--マウスが乗ったらimg_act、外れたらimg_inactを「sample」パラメータを指定して起動-->
    <!--クリックされた場合には、main_windowという名前のフレーム内にdisplay_sample.htmlという名前のHTML文書を表示する-->

    <A HREF="display_sample.html" TARGET="main_window" onMouseOver="img_act('sample')" onMouseOut="img_inact('sample')"><IMG SRC="buttonkan02.gif" NAME= "sample" WIDTH=100 HEIGHT=100 ALT="FMOD LWS sample" BORDER=0></A>

    </CENTER>
    </BODY>

    </HTML>

できあがり

Netscape Navigator 3.x以上、Microsoft InternetExplorer4.0以上であれば、アイコンのところにマウスポインタを持っていくと変化します。クリックすると、サンプルのHTMLが開きますので、また戻ってきてくださいね。
それから、上記以外のブラウザでは、単にノーマル時のイメージだけが表示されるハズです。

FMOD LWS sample2

アクションファイルなし

この手順には、アクションファイルを添付しておりません。




www.fmod.jp