JavaScriptで作るHPのテクニック [コンテンツ一覧] All Rights Reserved. Copyright (C) 2002- Miyake_kobo.

汎用スライドショーと汎用ギャラリー

ソースを書き換えずにそのまま使えるスライドショー
ソースを書き換えずにそのまま使えるギャラリー

シンプルなデザインの汎用スライドショー
写真データをIMGタグやAタグで作るスライドショー

スライドショーギャラリー

部品とスライドショーの複合ページ:イメージ一覧




スライドショーとギャラリーのテンプレート

スライドショーテンプレート:イメージ一覧

有料版のみのスライドショーテンプレート[無料版はない]

ギャラリーテンプレート:イメージ一覧

複数のアルバムを表現する:イメージ一覧

有料版のみの複数のアルバム[無料版はない]

有料版のみのギャラリーテンプレート[無料版はない]




既存のページに貼り付けるスライドショーとギャラリー

バナー兼用スライドショータイプ


ドラッグ操作スライドショータイプ


マウス操作スライドショータイプ


ボタンが消えるスライドショータイプ


コメント付き各種スライドショータイプ


枠外にはみ出すコメント付き各種スライドショータイプ


単体のスライドショーとして使う時は

 下記ソースにサンプルソースを書き換えたものを貼り付けて保存すれば、単体のスライドショーになります。センタリングが不要のときは<CENTER>を削除してください。



題名の記号について


[大小]は大小2枚ずつの写真を使うタイプです。
[大]は大写真のみ使用し、小写真は自動縮小表示するタイプです。
[選択]は何れかを選択できるタイプです。
[A]は写真データをAタグで記述するタイプです。
[IMG]は写真データをIMGタグで記述するタイプです。
スライドショーギャラリータイプ


jQuery版スライドショーギャラリータイプ


複数のアルバムを切り替えるタイプ


ページ内に複数のスライドショーを設置できるタイプ


jQuery版ページ内に複数のスライドショーを設置できるタイプ


常時作動、または自動開始タイプ


大小2枚ずつの写真使用スライドショーギャラリータイプ






コマ送り一覧表示タイプ


各種ビューア付きギャラリータイプ


「jQuery」「jQueryUI」使用のフロートタイプ



ホームページビルダーを使う時は

  • HEAD部分のコード

  •  ソースをコピーし、ホームページビルダーのメニューの「編集」→「ページの属性」をクリックます。 「属性」ウインドウの「その他」タブを開き、「その他のHTMLタグ」に貼り付けてください。

  • BODY部分のコード

  •  ソースをコピーし、ホームページビルダーを「ページ編集」モードにして、貼り付けたい位置にカーソルを置き、 メニューの「編集」→「形式を貼り付け」→「HTMLとして」を選択します。s字マークが入れば完了です。
     ソースを書き換える時は、s字マークを右クリックし、「属性の変更」を選択します。 スクリプトウインドウが開き、「エディットウインドウ」の中で修正してください。





    ホームページ制作の小技集

    メニューのテンプレート:イメージ一覧

    HTML・スタイルシートの基本

  • ホームページの制作方法とアップロード
  • HTMLタグ簡易リファレンス
  • 頻繁に使うスタイルと書き方
  • JavaScriptでスタイルを変更する
  • ホームページの背景色見本帳
  • ホームページの色を作る
  • スタイルシートで背景を作る
  • スタイルシートで装飾する
  • スタイルシートで背景を作る
  • スタイルシートでBOX要素を装飾する
  • スタイルシートで枠線を作る
  • HTML・スタイルシートの基本

  • A:hoverでスタイルを変える基本
  • A:hoverでスタイルを変える応用
  • マウスイベントハンドラ一覧
  • スイッチを作る1(1個で切り替え)
  • スイッチを作る2(ONとOFF)
  • スイッチを作る3(複数を切り替え)
  • 写真がclip拡大するリンク[jQuery]
  • 写真がポップアップ&ズーム拡大するリンク[jQuery] 
  • プルダウンリンク集[DHTML版]
  • プルダウンメニューの応用
  • プルダウンリンクの組合せで多階層メニューを作る
  • 触ると飛び出すボタンに背景写真を付ける
  • 触ると文字が変わり背景が写真になるボタン
  • リンクに触ると配色が変化する
  • リンクに触ると説明文が出る
  • ボタン・リンクのテンプレート:イメージ一覧

    ページ全体の処理

  • フェードインでスタートする
  • 紙芝居風にスタートする
  • ページ全体を操作する処理一覧
  • スタイルをまとめて変える
  • スタイルをクリックで動的に変える
  • 特定のタグのスタイルを一括変更する
  • HPからコメント付拡大表示Windowを書き出す
  • <SELECT>メニューと簡単なスクリプトの応用1 

  • <TEXTAREA>でページにメモ帳を付ける
  • innerHTMLでページの一部分を動的に書き換える
  • スクリプトの応用と簡単なスライドショー&ギャラリー

  • SCRIPTタグを使わないスライドショーを他のページに貼り付けるNo.00
  • JavaScriptを使わないギャラリーNo.017
  • JavaScriptを使わないギャラリーNo.021
  • JavaScriptを使わないスライドショーNo.018
  • DHTMLだけで動くスライドショーNo.000
  • DHTMLを使ったギャラリーNo.100
  • 写真を使う

  • <IMG>でonClick="スクリプト"を使う
  • サムネールリンクをプルダウン形式にする
  • 写真の中にマーキーでコメントを表示する
  • 背景を利用したデザイン1
  • 背景を利用したデザイン2
  • 背景を利用したデザイン3
  • 背景を利用したデザイン4
  • スクリプトページテンプレート:イメージ一覧

    JavaScriptの小技

  • JavaScript:役に立つオブジェクトの使用例
    1. BOXを引数にした関数で作る
    2. プロパティーとメソッドをBOXに直接設定する
    3. コンストラクタとインスタンスとメソッドチェーン化
    4. jQuery風に$関数を使いメソッドチェーン化する

  • 注) 画面に表示される著作権表記「(C) Script by Miyake_kobo.など」を許可なく削除することを禁止します。商業利用される方や、デザイン等の理由で著作権表記を削除したい方には有料(解説ページに金額表記がないサンプルは、1,000円)で著作権表記のないソース(有料版)を制作します。ご希望の方は メール でご連絡ください。
    注) [jQuery]以外で、共通プログラムを外部ファイルとして読み込んでいるサンプルは、当サイトの閉鎖、アドレス移動、システム変更、等で使用できなくなる事があります。また、オフラインでの使用もできません。共通プログラムを本体内に入れ(外部ファイルを不要にした)、当サイトがなくても、オフラインでも使用できるソースをご要望の方は、上記有料版をお申し込みください。