calendar

S M T W T F S
1234567
891011121314
15161718192021
22232425262728
293031    
<< July 2018 >>

categories

archives

profile

商品の紹介について

このブログではアフェリエイトを利用して管理人おすすめの紹介をしておりますが、実際の取引はお客様とリンク先商品提供者との間で行われ、当ブログ並びに管理人は一切の責任を負いかねますのでご了承ください。お取引に関して生じる問い合わせは、お取引先までご連絡ください。

JavaScript・リンクボタンもJavaScriptで=indexページ作りその2

0
      今回も、前回に引き続きJavaScriptを使って実際のホームページを作ります。絶対座標レイヤ(重ね順)に加えて、メソッド「getElementById」を使いこなします。
     では、今回のテクニックを整理しておきます。

    絶対座標・・・スタイルシート上で指定します。記述方法は、
          セレクタ { position: absolute; 配置場所; 数値; }
    absoluteの親要素にpositionが指定してある場合は、その親要素の左上がゼロ点になります。指定方法はabsoluteまたはrerativeで行います。

    レイヤ(重ね順)・・・スタイルシート上で指定します。記述方法は、
          #要素ID名 { z-index: 0; position等のその他の属性; }
          と、z-indexを指定することにより重ねて置くこと事ができます。
          z-indexは0からスタートし、数が小さいほど下になります。

    メソッド「getElementById・・・JavaScript文書内で、
          var 変数 = document.getElementById("探し出したいオブジェクトのID")
          と書き、探し出したオブジェクトの内容を変数にします。
          詳しくはく「JavaScript・文字の書き換え、絵の置き換え・・・DOMって言うんだって」を参照してください。

     では実際にHTML文書を記述します。まず一つのリンクボタンに対して、通常(マウスが外れた時)見える画像とマウスが重なった時に見える画像とを用意します。

       マウスが外れた時に見えるボタンの画像 link1imga.gif
    js71ボタン



       マウスが重なった時に見える画像 link1imgb.gif
    js72ボタン


     実際のHTML文書は下の通りです。2つのDIVを追加します。1つはページ下部の背景になるで囲んだ「草原風」の塗りつぶしで、もう一つがで囲んだリンクボタンのDIVです。リンクボタンの画像はlink1imga.gifを用い、マウスが重なった時に関数mouseOverを呼び出しマウスが離れた時に関数mouseOutを呼び出します。
    js73サンプル

     この2つのDIVは、下の様にスタイルシートで、「絶対座標」と「重なり順」を決めています。
    js75サンプル

    さてHTML文書の中で呼び出される2つの関数mouseOverとmouseOutはJavaScript文書の中でで囲んだように、「getElementById」メソッドで画像の置き換えをします。両関数とも、まず「getElementById」メソッドでIDが「link1img」の画像を呼び出し、次にそれぞれの関数の役割として画像を差し替えします。
    js74サンプル

    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
    リンクボタンにマウスを載せたりクリックしたりしてみて下さい。


     「これで一つできた!」
    と言いたいところですが、このようなリンクボタンを6つ作らなくてはなりません。JavaScript文書内に同じ機能の関数を6セットも作りたくありませんので、今回作った2つの関数を少し手入れします。
     まず、関数が処理している内容に注目します。この2つの関数ともに、HTML文書内の画像をIDで探し出し、そこに別の画像を差し替えます。このHTML上のIDと画像の名前は非常に似た名前で作っておきました。そこで方法として、HTML文書上のID、画像の名前をそれぞれ変数として定義し、これらの変数を、関数の引数linkを利用して組み立てます。
     具体的には、下ので囲んだ様にJavaScript文書を修正しました。
     薄いで囲んだ部分が変数の定義(計算式)で、アンダーラインの部分が元のJavaScriptに変数を代入した部分です。
    js76サンプル

     これに対応してHTML文書も、引数linkを渡す様に修正します。下のID「link1」のDIVの中でアンダーラインを引いた部分が修正部分です。引数として「link1」を割り当てています。
    js77サンプル

    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例
    さきほどのサンプルと全く同じ動きをします。

     これで一つできました。残り5つのボタンを作ります。JavaScript文書はもう触る必要なく、HTML文書でボタンを増設し、スタイルシートで絶対座標と重ね順を決めてやればOKです。ちなみに画像は、すでに紹介した2つも加えて
        引数「link1」〜「link6」に対して、「引数imga.gif」、「引数imgb.gif」
        2種類、12個を用意します。
    まずHTML文書には、ID「link1」のDIVと同様な内容で「link2」〜「link6」のDIVを作ります。
    js78サンプル

     次にスタイルシートでは、「link1」〜「link6」の絶対座標と重ね順を定義してやります。下ので囲んだ部分を追加しました。
    js79サンプル
    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

     今回は、絶対座標、レイヤ、メソッド「getElementById」を使ってホームページのリンクボタンを作りました。
     次回は、「お知らせ」、「トピックス」の欄を作ってみます。

     なお、ホームページの「JavaScriptのabc」もアップデイトしました。こちらからどうぞ→


    コメント
    コメントする








       
    この記事のトラックバックURL
    トラックバック