誰でも休暇の写真を自分の Web サイトに掲載できますが、写真をスライドショーとしてデザインできるのは最もクールな Web ビルダーだけです。また、これは 1 枚の写真と 1 つの HTML ページを含む単純なスライド ショーではなく、各画像が同じ HTML ページにダウンロードされる真の動的なスライド ショーです。ダイナミック HTML (DHTML) とカスケード スタイル シート (CSS) を使用して、友人、家族、同僚を退屈にさせる独自のスライド ショーを作成する方法を説明します。より印象的です。でも、覚えておいてください！このスライド ショーは DHTML で記述されているため、ブラウザ バージョン 4.0 以降でのみ表示できます。
もちろん、この種のスライドショーには重大な用途があります。まだ考えていないだけです。
ステップ1
ウェブ上にすでにある画像を収集し、同じサイズにトリミングします。サイズ範囲が 640 x 480 ピクセル以下であることを確認し、すべての写真でピクセル寸法を同じにしてください。写真のサイズが異なると、見る人にとって視覚的に不快になります。
ステップ2
ヘッダー タグで、最初に行う必要があるのは、
ステップ3
次に、CSS の詳細をすぐに処理するか、ヘッダー タグに JavaScript を挿入します。 var numSLides = の後に、表示するスライドの数を設定します (写真ごとにページにかなりの KB が追加されるため、あまり多く設定しないでください)。この例には 5 枚の写真があります。以下はプログラムコードです。
タグで終わる必要があります。
関数 setUp() {
if (!document.all) {
document.all = ドキュメント;
for (i=1;i<=numSlides;i++) document.all[("image"+i)]。
style=document.all[("画像"+i)];
}
スイッチスライド(1);
関数 switchSlide(sDir)
{
newSlide = currentSlide + sDir;
if (!newSlide) newSlide=numSlides;
if (newSlide > numSlides) newSlide=1;
document.all[("image"+newSlide)].style.visibility="visible";
document.all[("画像"+currentSlide)]。
style.visibility="非表示";
// 説明テキストが不要な場合は、次の行を削除してください。
document.all["captions"].document.forCaptions.captionsText。
値=キャプションTxt[新しいスライド];
currentSlide = newSlide;
}
//-->
プログラム コードの終わり近くのコメントに注意してください。説明がない場合は、その下の行を削除してください。
ステップ6
ヘッダータグをで閉じて、WebページのHTMLファイルのボディ部分に次のプログラムコードを貼り付けます。 プログラム コードは、通常の 形式に関連付けられた個別の
ステップ7
聴衆は自分のペースでスライドをクリックして読み進める必要があるため、クリックするための何かを提供する必要があります。 。普通の古いハイパーリンクを使用することもできますが、特別な「前へ」と「次へ」の GIF クリック ボタンを使用すると、はるかに洗練されます。サンプル プログラム コードでは、テーブルを使用して next.gif とprevious.gif を接続します。
[前へ] および [次へ] クリック ボタンに GIF ファイルを使用したくない場合は、上の タグをテキストに置き換えます。
ステップ8
最後に、