JavaScript

※グローバルナビゲーションは「rollover.js」にて画像置換しています。

※ページの先頭や任意の要素に、スムーズにページをスクロールさせることができる「JavaScript」を使用しています。

ドロップダウンするグローナバルナビゲーション

マウスを画像の上にのせるとドロップダウンします

作業時間：45分

  1. 配布元の「LEIGEBER」のサイトより「JavaScript Dropdown Menu with Multi Levels」ファイルをダウンロードします
  2. 箇条書きリスト（ｕｌ、ｌｉ）を使ってグローバルナビゲーションを記述します
  3. header内にscriptを記述して「script.js」を読み込みます
  4. ドロップダウンさせるために＜body＞内に
    ＜script type="text/javascript"＞
    var menu=new menu.dd("menu");
    menu.init("menu","menuhover");
    ＜/script＞
    を記述します

ブログ「しろうさぎのwebnotebook」もどうぞ。。。

クロスフェード

画像が徐々に消えながら次の画像に変化します

クロスフェード

作業時間：50分

  1. 8枚の写真を用意します
  2. Photoshopで600×400のサイズにトリミングします
  3. 箇条書きリスト（ｕｌ、ｌｉ）を使って写真を指定してします
  4. header内にscriptを記述して「crossfade.js」を読み込みます

画像置換

※画像の上にマウスを置くと変わります

  • グローバルナビゲーション
  • オリーブ
  • タマゴ
  1. 配布元のDaniel Nolanのサイトより「rollover.js」ファイルをダウンロードします
  2. head内に「rollover.js」を読み込ませます
  3. ロールオーバー用の画像には元の画像のファイル名と拡張子の間に「_o」を付けます
  4. ロールオーバーを実装したいimg要素のclass名に「imgover」を指定します。
  5. 「rollover.js」の「window.onload = initRollovers;」を以下のように書き換えて他のライブラリとバッティングせず使用するようにします。
    try{
    window.addEventListener("load",initRollovers,false);
    }catch(e){
    window.attachEvent("onload",initRollovers);
    }

サブウィンドウを開く

≪ オプション一覧 ≫
  • 画面の上端からの位置　top=ピクセル数
  • 画面の左端からの位置　left=ピクセル数
  • ウインドウの幅　width=ピクセル数
    ※サブウインドウのサイズは100px未満は設定できません。
  • ウインドウの高さ　height=ピクセル数
    ※サブウインドウのサイズは100px未満は設定できません。
  • スクロールバーの表示/非表示　scrollbars=yes（1）/no（0）
  • タイトルバーの表示/非表示　titlebar=yes（1）/no（0）
  • メニューバーの表示/非表示　menubar=yes（1）/no（0）
  • ツールバーの表示/非表示　toolbar=yes（1）/no（0）
  • ロケーションバー※の表示/非表示　location=yes（1）/no（0）
    ※ウインドウの右下の部分です。
  • ステイタスバーの表示/非表示　status=yes（1）/no（0）
    ※ウインドウの左下の部分です。
  • ディレクトリバーの表示/非表示　directions=yes（1）/no（0）
    ※ツールバーのアドレスの部分です。
  • ウィンドウサイズの変更の可/不可　resizable=yes（1）/no（0）
  • フルスクリーンで開くかどうか　fullscreen=yes（1）/no（0）
    ※この場合はサイズ指定は不要です。

※オプションは、オプション名＝値で指定します。複数指定をする場合は、「,」(半角カンマ)で区切ります。

ブラウザに文字を表示する

このページのトップへ