写真表示テクニック

1．写真をWeb表示テクニック
　写真展示室コーナーを開設した時表示方法を色々検討したがその結果をここに紹介します。

・本例は小写真をクリックで新ウインドウに以下の指定した大きさ、
　「800×532」「1024×681」「フルスクリーン」「原寸表示」で左図のような写真を表示します

・表示された拡大写真は、再度マウスの左クリックで元の画面に戻ります。
・右クリックでの手動スライド機能もあります。

2．HTMLファイルのCSSで拡大表示

・本例は小写真をクリックで新ウインドウに拡大写真掲載のHTMLファイルを開きます。

・拡大写真には左図のような枠をスタイルシートで付けてあります。

3．HTMLファイルのTableタグで拡大表示

・本例は小写真をクリックで新ウインドウに拡大写真掲載のHTMLファイルを開きます。

・拡大写真には左図のような枠をHTMLタグ<table>で付けてあります。

4．HTMLファイル(枠なし)で拡大表示

・本例は小写真をクリックで新ウインドウに拡大写真掲載のHTMLファイルを開きます。

・左図のような原寸大の拡大写真を表示します
・特に表示に関する小細工はなく横or縦写真に自動的に対応できます。

5．クリックで同じページに拡大表示
　・5個の小写真を表示しその写真をクリックで下に大写真を表示

6．マウスONで同じページに拡大表示
　・5個の小写真を表示しその写真にマウスを乗せると下に大写真を表示

7．クリックで同じページに&ダブルクリックでフルスクリーンへ拡大表示-1
　・5個の小写真を表示しその写真をクリックで下に大写真を表示（6項と同じ）
　・5個の小写真は「→」「→→」「←」「←←」で別の小写真を表示できます
　　（ボタンで小写真は移動しますがクリックしないと大写真は表示しません）
　・小写真または大写真ダブルクリックでフルサイズの新ウインドウ開きます
　・新ウインドウには原寸大の写真を表示します

8．写真リストから自動で影付きでサンプル表示し、クリックで拡大表示(影は別図)

　・前1～7項の例は小写真1個ずつタグを書き表示しています。
　・その場合写真が多いと面倒なので本例はリストから自動に小写真を表示します。
　・表示する小写真には影付きの台紙を付けます
　・小写真クリックで大きな写真を表示します
　・新ウインドウの写真は右クリックで次を表示します
　・新ウインドウは左クリックで閉じます

＜追記：頂いた写真をWebページ掲載しましたが、その時上記を簡単に実行するソフトを作った＞
使用例：「長尾白峯作品集-パネル6号」

写真表示としては、拡大写真を左クリック：NEXT、右クリック：BACK、ダブルクリック：閉じる　等、
他のWebページでは見たことのない便利機能付きですが、下記に掲載しました（フリーソフト）。
「KI写真一覧表示ダウンロードページ」

9．写真リストから自動で影付きでサンプル表示し、クリックで拡大表示(影はCSS)

　・本例は台紙の影をCSSで付ける以外は前8項と同じです。
　　（影用の別図の準備が不要の点は楽ですが、8項の影の方が綺麗です）

10．クリックで同じページに&ダブルクリックでフルスクリーンへ拡大表示-2

　・5個の小写真を表示しその写真をクリックで下に大写真を表示（左図参照）
　・5個の小写真は「→」「→→」「←」「←←」で別の小写真を表示できます
　　（7項を改善：別の小写真は移動で大写真の表示も変わります）
　　（7項を改善：ボタンで小写真は移動し選択した大写真の表示も変わります）
　　（7項を改善：選択した小写真背景の色を変え判りやすくなっています）

　・小写真または大写真ダブルクリックでフルサイズの新ウインドウ開きます
　・新ウインドウには原寸大の写真を表示します

~~11．ワイプ効果付きスライドショー】~~

　・自動的に写真が変わるスライドショーです
　・進行時間とワイプ効果の指定も出来ます（IE6で実行確認済み、他は？）

　・ワイプ効果は、IE６まで動作可。この項目はそのうち削除します

目次へ戻る