Meskipun HTML Dinamis tampak hidup, pada kenyataannya, keseluruhan Web masih hampir statis. Tentu saja, beberapa situs web yang lebih avant-garde telah memiliki beberapa konten interaktif selama beberapa waktu, namun sebagian besar masih diimplementasikan menggunakan plug-in atau dengan menulis banyak halaman untuk versi browser yang berbeda. Bagi sebagian besar pembuat halaman web, meskipun mereka ingin menulis beberapa versi halaman, sulit bagi mereka untuk memiliki waktu. Selain itu, halaman web yang dapat mencapai efek interaktif biasanya memerlukan bandwidth yang tinggi penulis dan pemirsa. Namun, tidak harus seperti ini. Di sini, Anda dapat mempelajari cara cepat dan mudah untuk menambahkan efek DHTML ke halaman web dalam kondisi bandwidth rendah. Ini adalah metode gerakan mouse. Metode ini tidak memerlukan memuat gambar apa pun atau Menulis beberapa halaman.
Pengambilan Informasi Mouse yang Lebih Baik
Mouseover adalah salah satu metode dinamis yang paling banyak digunakan dan efektif di Web, dan alasan bagusnya adalah karena metode ini memungkinkan pengunjung mendapatkan umpan balik yang jelas dan langsung. Anggap saja seperti ini: Gerakkan mouse ke atas tautan hypertext dan tautan tersebut akan disorot, berubah warna, atau berubah menjadi "Saya adalah sebuah tautan!"
Ini tidak berarti bahwa semua tautan mouseover yang dibuat adalah sama. Mereka berbeda. Situasi terburuknya adalah tautan mouseover diimplementasikan dalam bahasa Java atau format khusus, seperti format Shockwave Macromedia, yang mengharuskan pemirsa memasang plug-in untuk melihat efeknya. Skenario terbaiknya adalah tautan mouseover ditulis dalam JavaScript yang didukung oleh semua browser. Namun meskipun diimplementasikan dengan JavaScript, browser tetap memerlukan dua gambar, satu untuk kecerahan tinggi dan satu lagi untuk tampilan normal, sehingga membuang-buang penggunaan bandwidth.
Sekarang mari kita lihat DHTML, yang membuat tautan mouseover tanpa memuat gambar apa pun. Satu-satunya hal yang perlu diperhatikan adalah kode DHTML perlu dibuka oleh browser untuk membuka objek halaman Web, seperti link dan gaya, sehingga dapat dijelaskan oleh Document Object Model (DOM). Dengan kata lain, kode tersebut saat ini hanya berfungsi di Internet Explorer 4.0. Namun, browser generasi kelima Netscape (diperkirakan akan dirilis pada akhir tahun ini) akan mendukung penuh DOM. Selain itu, jangan khawatir tentang tautan mouseover yang digunakan di browser yang tidak kompatibel yang tidak mendukung kode DHTML di halaman tersebut akan mengabaikannya begitu saja. (Untuk detailnya, silakan lihat bagian "Biarkan DOM berfungsi di situs web Anda" nanti.)
Kode
Halaman Web Biasa dibagi menjadi dua area utama: satu adalah area konten, dan yang lainnya adalah area navigasi. Tautan arah mouse biasanya muncul di area navigasi. Biasanya, tombol yang disorot digunakan untuk mengarahkan pemirsa ke berbagai area situs, seperti grafik situs atau halaman umpan balik. Daripada menggunakan tombol, kita akan mengubah link teks biasa menjadi link mouseover interaktif. Caranya adalah: pertama masukkan link teks biasa ke dalam dokumen, seperti:
< a href="contact_us.html">
Hubungi Kami< /a>
Langkah kedua mengubah warna tautan teks saat mouse bergerak di atasnya. Program skrip DHTML adalah sebagai berikut:
function rollon( ){
if (window.event.srcElement.tagName
== "A"){
window.event.srcElement.style.color
= "red";}
}
function rolloff( ){
if ( window.event.srcElement.tagName
== "A"){
window.event.srcElement.style.color
= "";}
}
document.onmouseover = rollon;
document.onmouseout
= rolloff;
Tag
Program skrip yang ditulis sebelumnya mendefinisikan dua fungsi utama: rollon (diaktifkan saat mouse bergerak melewati link) dan rolloff (diaktifkan saat mouse menjauh dari link). Setiap fungsi dimulai dengan pernyataan 'if' sederhana, yang berarti: setiap kali event onmouseover dipanggil dalam dokumen Web, fungsi rollon akan memberitahu browser untuk menentukan apakah objek yang mengaktifkan event tersebut adalah tag Anchor (window.event . srcElement.tagName == "A"). Jika demikian, skrip akan menerapkan gaya khusus (dalam hal ini merah) pada tautan. Demikian pula, ketika peristiwa onmouseout terjadi, fungsi rolloff akan mengembalikan gaya ke warna defaultnya (color="").
Dua baris terakhir skrip ini memberi tahu browser untuk menjalankan fungsi rollon ketika peristiwa onmouseover terjadi dan mematikan fungsi tautan mouseover (mouseover) ketika peristiwa onmouseout terjadi.
Dapatkan hasil dua kali lipat dengan setengah usaha
Internet Explorer 4.0 memungkinkan Anda menggunakan DHTML untuk mengontrol setiap objek dalam dokumen. Tentu saja, Anda dapat mencapai lebih banyak fungsi selain mengubah warna tag Anchor. Faktanya, Anda dapat menerapkan elemen apa pun dari Cascading Style Sheets (CSS, spesifikasi pemformatan standar W3C) ke semua jenis objek atau komponen sumber daya. Misalnya, selain membuat link tampak merah, Anda juga dapat menambahkan atau menghapus garis bawah pada link tersebut.
Untuk menghapus garis bawah, cukup masukkan atribut style berikut ke semua tag jangkar pada halaman:
style = "text-decoration: none"
Pernyataan ini akan menghapus garis bawah dari link, sehingga tampak normal atau keadaan default. (Secara default, Internet Explorer 4.0 dan Navigator 4.0 menggarisbawahi semua tautan teks. Pernyataan di atas akan mengubah status default tautan ini satu per satu.)
Kemudian, tambahkan pernyataan berikut di bawah fungsi rollon:
window.event.
textDecoration = "underline";
Sekarang, sumber daya untuk acara mouseover yang Anda tentukan akan berubah menjadi merah dan memiliki gaya garis bawah. Perlu dicatat bahwa garis bawah dapat dihilangkan dengan menambahkan pernyataan berikut ke fungsi rolloff:
window.event.srcElement.style.textDecoration
= "none";
Fungsi modifikasi di atas yang dapat diimplementasikan dengan cepat menunjukkan kekuatan DHTML sederhana program skrip. Ini tidak memerlukan memuat gambar apa pun, tetapi menggunakan kode yang sangat fleksibel dan portabel untuk menghasilkan efek visual yang menarik. Saya dapat mengatakan bahwa Anda dapat menggunakannya untuk mengakses dokumen apa pun, bahkan di browser lama. Jika Anda ingin mendapatkan kode ini dan menguasainya sendiri, silakan kunjungi website kami: www.windowspro.com .
-------------------
Edward Grossman adalah produser situs web www.windowspro.com . Ia memiliki gelar Ph.D. dalam bidang filsafat dan terlibat dalam penelitian di bidang filsafat sebelum munculnya Web. E-mailnya: [email protected]
Cukup tambahkan sekitar 15 baris kode ke ①head dokumen, dan Anda dapat mengubah ②link teks biasa di halaman Web mana pun menjadi ③link interaktif yang diaktifkan mouse (mouseover).
------------
Jadikan DOM berfungsi di situs web Anda.
Dengan Dynamic HTML (DHTML), pemrograman berorientasi objek bukan lagi sesuatu yang hanya dapat dilakukan oleh pakar pemrograman, melainkan menjadi bidang yang dimiliki semua orang bahkan yang berpengalaman dalam web. pembuat halaman dapat terlibat di dalamnya. Hal ini sebagian besar berkat Document Object Model, atau DOM. Spesifikasi W3C ini memperlakukan setiap komponen dalam dokumen sebagai objek, baik itu dokumen, gaya, atau tautan. Skrip dapat memodifikasi objek ini berdasarkan masukan pengguna, jenis browser, atau banyak variabel lainnya, termasuk mengubah ukuran, mengubah gaya, atau memperbarui tautan.
DOM dapat membuka seluruh dokumen, memungkinkan penulis web membuat halaman interaktif yang dapat disesuaikan tanpa membebankan overhead pengunduhan yang besar pada pengguna. Ini tidak hanya mengaktifkan tautan mouseover bandwidth rendah, namun juga mengaktifkan menu penjelajahan web yang dapat dilipat dan komponen halaman yang dapat dipindahkan (seperti gambar, blok teks, dll.).
Untuk informasi lebih lanjut tentang DOM, silakan kunjungi situs: www.w3.org/dom , www.microsoft.com/workshop/author/dhtml/ , dan developer.netscape.com/docs/manuals/communicator/dynhtml/.
Untuk contoh aplikasi DHTML, kunjungi: www.windowspro.com dan www.projectcool.com (coba seret Saturnus) dan telusuri "Lihat sumber".
Di IE 4.0, Anda dapat menggunakan HTML Dinamis untuk mengoperasikan lusinan objek. Daftar rinci tersedia di www.microsoft.com .