Siapa pun dapat memasang foto liburan di situs web mereka, tetapi hanya pembuat web paling keren yang akan mendesainnya sebagai tayangan slide. Dan ini bukan tayangan slide sederhana dengan satu foto dan satu halaman HTML, tetapi tayangan slide yang benar-benar dinamis, dengan setiap gambar diunduh ke halaman HTML yang sama. Kami akan mengajari Anda cara menggunakan Dynamic HTML (DHTML) dan Cascading Style Sheets (CSS) untuk membuat tayangan slide pribadi Anda yang akan membuat teman, keluarga, dan kolega Anda semakin membosankan, oh tidak! Ini lebih mengesankan. Tapi ingat! Karena tayangan slide ini ditulis dalam DHTML, maka hanya dapat dilihat di browser versi 4.0 atau lebih tinggi.
Tentu saja, tayangan slide semacam ini memiliki kegunaan yang serius. Hanya saja kami belum memikirkannya.
langkah pertama
Kumpulkan gambar yang Anda miliki di web dan potong ke ukuran yang sama. Pastikan rentang ukurannya tidak lebih besar dari 640 x 480 piksel, dan pertahankan dimensi piksel yang sama di semua foto - hal ini akan mengganggu secara visual bagi pemirsa jika ukuran foto bervariasi.
Langkah 2
Di tag header Anda, hal pertama yang perlu Anda lakukan adalah menunjukkan bahwa Anda menggunakan CSS di tag <STYLE>. Dalam tag <STYLE>, atur posisi pada halaman di mana Anda ingin slide tersebut muncul, dan putuskan apakah akan memulai dengan gambar latar belakang kosong, atau menampilkan slide pertama secara langsung. Silakan potong dan tempel kode program berikut ke halaman Anda, menggunakan koordinat lokasi pilihan Anda:
<STYLE type="text/css"> <!-- .slides {posisi:absolute; kiri: 25%; atas:25%; visibilitas:tersembunyi} --> </STYLE>
Langkah 3
Selanjutnya, segera tangani detail CSS, atau masukkan JavaScript di tag header. Setelah var numSLides =, atur jumlah slide yang akan ditampilkan (jangan terlalu banyak, karena setiap foto akan menambah jumlah KB yang cukup besar pada halaman). Ada lima foto dalam contoh kita. Berikut kode programnya:
<SCRIPT bahasa = "JavaScript1.2"> var numSlides = 5; var currentSlide = numSlides;
Langkah 4
Jika Anda ingin menambahkan teks penjelasan pada gambar, Anda dapat menggunakan kode program berikut untuk mengganti teks deskripsi kami dengan teks deskripsi Anda sendiri:
var captionTxt = Array baru(numSlides);
fungsi setUpCaptions() {
captionTxt[1] = "Pintu masuk ke Dermaga 39."
captionTxt[2] = "Singa laut berkeliaran di dekat dermaga."
captionTxt[3] = "Perahu berlabuh di dermaga."
captionTxt[4] = "Mural paus dunia bawah laut."
captionTxt[5] = "Pulau kecil atau batu karang di laut."
}
Langkah 5
Tempelkan kode program yang ditampilkan di sini ke dalam file HTML halaman web Anda, di bawah deskripsi JavaScript. Karena Navigator 4.0 dan IE 4.0 menafsirkan CSS secara berbeda, skrip kami menggunakan deteksi objek untuk menentukan mode rendering. Jika mode yang disajikan adalah Navigator, masih dapat mendefinisikan beberapa objek tertentu sehingga kode program IE tetap berfungsi. Selain itu, ini juga merupakan akhir dari keseluruhan kode program, sehingga harus diakhiri dengan tag </SCRIPT>:
pengaturan fungsi() {
if (!document.all) {
dokumen.semua = dokumen;
untuk (i=1;i<=numSlides;i++) dokumen.semua[("gambar"+i)].
style=document.all[("gambar"+i)];
}
beralihSlide(1);
}
fungsi saklarSlide(sDir) {
newSlide = Slide saat ini + sDir;
if (!newSlide) newSlide=numSlide;
if (Slide baru > numSlides) Slide baru=1;
document.all[("image"+newSlide)].style.visibility="terlihat";
document.all[("gambar"+Slide saat ini)].
style.visibility="tersembunyi";
// Jika Anda tidak menginginkan teks deskripsi, hapus baris berikutnya:
dokumen.semua["captions"].document.forCaptions.captionsText.
nilai=captionTxt[Slide baru];
slide saat ini = slide baru;
}
//-->
</skrip>
Perhatikan komentar di dekat akhir kode program: jika Anda tidak memiliki deskripsi, hapus baris di bawahnya.
Langkah 6
Tutup tag header dengan </HEAD>, lalu tempelkan kode program berikut ke bagian badan file HTML halaman web. Perhatikan bahwa kode program mengidentifikasi setiap gambar dengan tag <DIV> terpisah, yang dikaitkan dengan format <IMG src> biasa:
<BODY onLoad="setUp()">
<B> Pertunjukan slide 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="ketiga.jpg"></DIV>
<DIV id="image2" class="slides"><IMG src="kedua.jpg"></DIV>
<DIV id="image1" class="slides"><IMG src="first.jpg"></DIV>
Langkah 7
Audiens Anda harus mengklik slide dengan kecepatan mereka sendiri, jadi Anda harus memberi mereka sesuatu untuk diklik. . Anda dapat menggunakan hyperlink biasa, namun jauh lebih canggih dengan tombol klik khusus GIF Sebelumnya dan Berikutnya. Contoh kode program menggunakan tabel untuk menghubungkan next.gif dan previous.gif:
<DIV style="position:absolute; atas:350px; kiri: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>
Jika Anda tidak ingin menggunakan file GIF untuk tombol klik Sebelumnya dan Berikutnya, ganti tag <IMG> di atas dengan teks.
Langkah 8
Terakhir, masukkan teks deskripsi yang akan ditampilkan di <TEXTAREA>. Anda dapat menentukan ukuran <TEXTAREA> sesuka Anda, cukup ubah angka baris= dan kolom=. Berikut kode programnya:
<DIV id="captions" style="position:absolute; kiri: 320px; atas:75px">
<B>Keterangan gambar</B>
<Nama FORMULIR=untukCaptions>
<TEXTAREA name="captionsText" wrap="virtual" row=25 cols=20"></TEXTAREA>
</BENTUK>
</DIV>