calendar

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

categories

archives

profile

商品の紹介について

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

JavaScript・「visibility」でメインコンテンツ切り替え=indexページ作りその4

0
     2012年も残り1週間。
    ホームページ作りは、いよいよラストステージへ・・・

     
    今回でホームページ作りも大詰めです。メインコンテンツを配置して、6つのリンクボタンにマウスを乗せると、そのメインコンテンツの内容が変わるようにします。新たに使うテクニックは、スタイルシートでの属性「visibility」指定です。
     
    属性「visibility」とは、「見えるようにするか否か」を指定する事です。
     
    属性「visibility」「visible」と指定すれば見える様になり「hidden」と指定すれば見えなくなります。

     
    前準備として、ページを開いた時に表示されるメインコンテンツを絶対座標で配置します。
     
    メインコンテンツDIVのIDは「link0con」と名付け、上下2段のから成るtableで構成します。tableの上の段に説明文、下の段に画像を入れます。
     
    実際のHTML文書には下ので囲んだ部分を追加しました。
    js88サンプル
     一方スタイルシートでは、このID「link0con」のDIVはで囲んだ様に、絶対座標(510、260)、「visibility」は「visible」で配置します。尚、で囲んだ部分も追加していますが、これはこのtableと文章の属性を指定しています。
    js91サンプル
    右をクリックして、このプログラムの動きを見て下さい。 →JavaScript例

     さて、リンクボタンは6つありますので、6つのDIVを用意します。この6つのDIVのIDは「link1con」〜「link6con」と名付け、「link0con」と同様にtableで構成します。
     HTML文書は下ので囲んだ部分が追加されました。
    js89サンプル
     スタイルシートでは、各DIVに対して、下ので囲んだ様に、「link0con」と同じ絶対座標(510、260)、visibility」は「hidden」を指定します。
    js92サンプル
     これでこのページの初期状態としては、7枚のDIVが重なっており「link0con」が見える状態になります。見た目は、先ほど確認した画面と全く同じです。
     さてJavaScriptでは、すでに作ってある2つの関数「mouseOver」と「mouseOut」に手を入れます。「mouseOver」では「link0con」を「hidden」にして、「link*con」を「visible」にします。 「mouseOut」では「link0con」を「visible」に戻して、「link*con」を「hidden」に戻します。
     実際のJavaScriptは、下ので囲んだ部分が追加です。
    js90サンプル
     これで完成です。

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

     今回は、visibility」属性を使ってメインコンテンツの入れ替えをしました。
     これでJavaScriptを使った、実際のホームページは終了します。

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


    コメント
    コメントする








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