誰でも休暇の写真を自分の Web サイトに掲載できますが、写真をスライドショーとしてデザインできるのは最もクールな Web ビルダーだけです。また、これは 1 枚の写真と 1 つの HTML ページを含む単純なスライド ショーではなく、各画像が同じ HTML ページにダウンロードされる真の動的なスライド ショーです。ダイナミック HTML (DHTML) とカスケード スタイル シート (CSS) を使用して、友人、家族、同僚を退屈にさせる独自のスライド ショーを作成する方法を説明します。より印象的です。でも、覚えておいてください！このスライド ショーは DHTML で記述されているため、ブラウザ バージョン 4.0 以降でのみ表示できます。
もちろん、この種のスライドショーには重大な用途があります。まだ考えていないだけです。
ステップ1
ウェブ上にすでにある画像を収集し、同じサイズにトリミングします。サイズ範囲が 640 x 480 ピクセル以下であることを確認し、すべての写真でピクセル寸法を同じにしてください。写真のサイズが異なると、見る人にとって視覚的に不快になります。
ステップ2
ヘッダー タグで、最初に行う必要があるのは、<STYLE> タグで CSS を使用していることを示すことです。 <STYLE> タグで、スライドを表示するページ上の位置を設定し、空白の背景画像から開始するか、最初のスライドを直接表示するかを決定します。選択した位置座標を使用して、次のプログラム コードを切り取ってページに貼り付けてください。
<STYLE type="text/css"> <!-- .slides {位置:絶対左: 25%; 可視性:非表示} --> </STYLE>
ステップ3
次に、CSS の詳細をすぐに処理するか、ヘッダー タグに JavaScript を挿入します。 var numSLides = の後に、表示するスライドの数を設定します (写真ごとにページにかなりの KB が追加されるため、あまり多く設定しないでください)。この例には 5 枚の写真があります。以下はプログラムコードです。
<SCRIPT language="JavaScript1.2"> var numSlides = 5; var currentSlide = numSlides;
ステップ4
画像に説明テキストを追加したい場合は、次のプログラム コードを使用して、説明テキストを独自の説明テキストに置き換えることができます。
var captionTxt = 新しい Array(numSlides)
関数 setUpCaptions()
;
captionTxt[1] = "ピア 39 への入り口。"
captionTxt[2] = 「アシカが桟橋の近くを歩き回っています。」
captionTxt[3] = "ボートは桟橋に停泊しました。"
captionTxt[4] = "水中世界のクジラの壁画。"
captionTxt[5] = "海の小島または岩。"
}
ステップ5
ここに示されているプログラム コードを、Web ページの HTML ファイルの JavaScript の説明の下に貼り付けます。 Navigator 4.0 と IE 4.0 では CSS の解釈が異なるため、スクリプトではオブジェクト検出を使用してレンダリング モードを決定します。表示されたモードが Navigator の場合でも、IE プログラム コードが引き続き機能するように、いくつかの特定のオブジェクトを定義できます。さらに、これはプログラム コード全体の終わりでもあるため、</SCRIPT> タグで終わる必要があります。
関数 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;
}
//-->
</script>
プログラム コードの終わり近くのコメントに注意してください。説明がない場合は、その下の行を削除してください。
ステップ6
ヘッダータグを</HEAD>で閉じて、WebページのHTMLファイルのボディ部分に次のプログラムコードを貼り付けます。 プログラム コードは、通常の <IMG src> 形式に関連付けられた個別の <DIV> タグで各画像を識別することに注意してください。
<BODY onLoad="setUp()">
<B> Builder.com のスライド ショー!</B>
<DIV id="image5" class="slides"><IMG src="fifth.jpg"></DIV>
<DIV id="image4" class="slides"><IMG src="fourth.jpg"></DIV>
<DIV id="image3" class="slides"><IMG src="third.jpg"></DIV>
<DIV id="image2" class="slides"><IMG src="second.jpg"></DIV>
<DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>
ステップ7
聴衆は自分のペースでスライドをクリックして読み進める必要があるため、クリックするための何かを提供する必要があります。 。普通の古いハイパーリンクを使用することもできますが、特別な「前へ」と「次へ」の GIF クリック ボタンを使用すると、はるかに洗練されます。サンプル プログラム コードでは、テーブルを使用して next.gif とprevious.gif を接続します。
<DIV style="位置:絶対; トップ:350px; 左:100px">
<A href="javascript:switchSlide(-1)"><IMG src="previous.gif" border=0></A>
<A href="javascript:switchSlide(1)"><IMG src="next.gif" border=0></A>
</DIV>
[前へ] および [次へ] クリック ボタンに GIF ファイルを使用したくない場合は、上の <IMG> タグをテキストに置き換えます。
ステップ8
最後に、<TEXTAREA>に表示する説明文を入力します。 <TEXTAREA> のサイズは好みに合わせて決定できます。rows= とcols= の数値を変更するだけです。以下はプログラムコードです。
<DIV id="captions" style="position:absolute; left: 320px; top:75px">
<B>画像のキャプション</B>
<FORM name=forCaptions>
<TEXTAREA name="captionsText" Wrap="virtual" rows=25cols=20"></TEXTAREA>
</FORM>
</DIV>